JQuery: Effet push?

Question

J'utilise actuellement l'effet JQuery slideDown/slideUp et je n'effectue pas ce que je veux. Essentiellement, je veux créer une action où je "pousse" un div du haut de la fenêtre du navigateur.

Quelque chose de semblable à la following push effect example.

Comment puis-je faire avec JQuery? Le problème avec l'utilisation de slideDown/slideUp est que l'autre DIV chevauche juste le div que je cache. Mais à la place, je veux PUSH la div je ne veux pas visible du haut de la fenêtre du navigateur.

Answer 1

Faites deux divs, l'un dans l'autre. En utilisant CSS, définissez une hauteur pour l'extérieur et définissez overflow: hidden. Cela signifie que si le contenu de la div interne est trop long, il sera invisible. Tout ce que vous voulez faire glisser va à l'intérieur du div interne. Maintenant, tout ce que vous devez faire est de déplacer la div intérieure vers le haut:

 _____ 
    | ooo | 
____|_____|____ 
| | xxx | |  now, ooo -> invisible 
|____|_____|____|   xxx -> visible 

Cela peut être fait en utilisant la fonction animate jQuery.

$('#innerDiv').animate({ 
    top: -50px 
}); 

Answer 2

Je ne sais pas si je vous comprends bien, mais vous pouvez simplement l'animer, comme

var pos = $('#myDIV').position(); 
$('#myDIV').css({ 
    position: 'absolute', 
    left:  pos.left, 
    top:  pos.top,  
}).animate({ 
    top:  '-=400' 
},{ 
    duration: 2000, 
    complete: function(){ 
     $(this).remove(); 
    } 
}); 

qui devrait déplacer votre div hors de la vue et de l'enlever par la suite. Si ce n'est pas ce que vous voulez , vous pouvez l'adapter.

Answer 3

je pense, c'est ce que u recherchent http://jsfiddle.net/JuW3B/2/