JQuery-afbeelding hover hoe je een leuk hover fade-effect creëert met schaduw en beweging omlaag?

Hoe is het mogelijk om een ​​leuk zweefeffect te creëren wanneer de muis over een afbeelding beweegt. Het moet vervagen en schaduw krijgen en een beetje naar beneden gaan.

0
Als u jQuery gebruikt, is er de functie .anim() die u kan helpen. Welke code heb je tot nu toe waarmee we kunnen werken?
toegevoegd de auteur JesseBuesking, de bron

1 antwoord

De CSS:

.hoverImg {
    opacity: 0.5;
    margin-top: 0px;
    box-shadow: 0px 0px 0px #000;
}

En de JavaScript:

$('.hoverImg').each(function()
{
    $(this).mouseover(function()
    {
        $(this).animate({'opacity': 1, 'margin-top': '5px', 'box-shadow': '2px 2px 2px #000'}, {duration: 500});
    });
    $(this).mouseout(function()
    {
        $(this).animate({'opacity': 0.5, 'margin-top': '0px', 'box-shadow': '0px 0px 0px #000'}, {duration: 500});
    });
});

Waarschuwing: box-shadow is mogelijk niet alleen geanimeerd met jQuery. Bekijk jQuery UI voor een mogelijke oplossing. Ook wilt u (natuurlijk) browser-specifieke prefixen voor vakschaduw toevoegen, omdat deze nog niet universeel wordt ondersteund als een CSS-standaardeigenschap.

1
toegevoegd
Hoe verplaats je de afbeelding een beetje langzamer zoals 5 px tijdens het zweven?
toegevoegd de auteur Rails beginner, de bron
Er is iets mis met de code: jsfiddle.net/buyC9/21
toegevoegd de auteur Rails beginner, de bron
Oops! @Railsbeginner je hebt gelijk. Ik ben de sluithaakjes na mijn selectors vergeten. Ik heb mijn bericht bewerkt om dit te wijzigen. Goede vangst! Sorry daarvoor...
toegevoegd de auteur Aaron, de bron
tussen haakjes, hier is een plug-in die de eigenschap box-shadow animeert: bitstorm.org/jquery/shadow-animation
toegevoegd de auteur Aaron, de bron