Comment puis-je faire de cette div glisser vers le haut et vers le bas hover effet?

Je veux créer un <div> animation très bien comme sur ce site: http://www.weareinstrument.com/about/. Lorsque vous survolez le plus sombre, gris boîtes et les images au bas de l'écran, elles semblent glisser vers le haut et vers le bas en fonction de si vous êtes en vol stationnaire. Je n'arrive pas à trouver le jQuery dans le code source. Quelqu'un peut-il m'informer sur comment faire?

OriginalL'auteur Farreal | 2012-02-12

  1. 4

    Ici est une voie possible pour atteindre cet objectif. Disons que le div montrant par défaut de la classe default et celui qui montre sur le vol stationnaire a la classe onhover.

    Violon: http://jsfiddle.net/jPneT/1/

    $('.up-down').mouseover(function(){
    $('.default').stop().animate({
        height: 0    
    }, 200);                        
}).mouseout(function(){
    $('.default').stop().animate({
        height: 200 
    }, 200)    
});

    OriginalL'auteur Ehtesham

  2. 2

    Vous pouvez utiliser un sprite css et animer background-position. Il ne fonctionne pas dans Firefox, si vous avez besoin d'utiliser ce plugin proposé ici De fond de l'animation en jQuery ne fonctionne pas sous Firefox.

    La bonne chose à propos de cette solution est que vous pouvez facilement de secours aux feuilles de style css dans le cas où le JS est désactivé.

    html:

    <div id="img"></div>

    css

    #img {
    height: 256px;
    width: 256px;
    background: url(http://i42.tinypic.com/auwns0.jpg) 0 0 no-repeat;
}

/* Fallback */
#nojs #img:hover { background-position: 0 -256px; }

    jQ:

    $('#img').hover(function(){
    $(this).stop().animate({'background-position': '0 -256px'});
}, function(){
    $(this).stop().animate({'background-position': '0 0'});
});

    Exemple:

    http://jsfiddle.net/elclanrs/T2JXn/9/

    OriginalL'auteur elclanrs

  3. 1

    Voici un tutoriel qui pourrait vous intéresser:

    http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

    OriginalL'auteur Alex

  4. 1

    Je n'ai pas de recherche pour le code sur le site web que vous avez mentionné, mais vous pouvez utiliser quelque chose comme ceci:

    <div id="foo">
    <div id="onMouseIn" style="display:none"><img src="inPicture"/></div>
    <div id="onMouseOut"><img src="outPicture"/></div>   
</div>

$(document).ready(function(){
    $('#foo').hover(function(){
        //This is onMouseIn event
        $('#onMouseIn').slideDown(150);
        $('#onMouseOut').slideUp(150);
    }, 
    function(){
        //This is onMouseOut event
        $('#onMouseOut').slideDown(150);
        $('#onMouseIn').slideUp(150);
    });
});

    Ici est le violon.

    Dans votre exemple, le e dans function(e) est totalement superflu.
    Oui, vous avez raison, je vais le prendre.

    OriginalL'auteur Atticus