JQuery Animer

Question

vraiment facile, je suis sûr que ...

J'ai un div qui est en plein écran et je veux le faire glisser vers le bas du haut vers le bas.

J'ai ceci:

$('#full-screen').animate({ 
"bottom":0, 
height: 'toggle'  
    }, 1000, function() { 
    // Animation complete. 
}); 

Mais c'est dans le mauvais sens que le fond déplace vers le haut; comment puis-je faire en sorte que le fond reste là où il se trouve et que le haut glisse vers le bas pour y répondre?

Merci

Answer 1

Vous devez animer aussi la propriété « top » de la div ainsi que la désactivation de la file d'attente d'animation afin que les deux animations se produisent en même temps.

$('#slide2').animate(
    {height: '0px'}, 
    { 
     duration: 1000, 
     queue: false, //Disable the queue so both events happen at the same time. 
     complete: function() 
     { 
      // animation complete 
     } 
    } 
).animate(//also animate the top property 
    {top: '500px'}, 
    {duration: 1000} 
);​ 

Essayez-le à jsFiddle.

Answer 2

Vous pouvez utiliser marginTop pour elle:

var h=$('#full-screen').height(); 
$('#full-screen') 
    .animate(
    {marginTop: h, height: 'toggle'}, 
    1000, 
    function() { 
     // Animation complete. 
    } 
) 

voir à: http://jsbin.com/esotu3

Answer 3

Votre code exact fonctionne très bien lorsque vous avez le positionnement absolu sur l'élément.

http://jsfiddle.net/hhEJD/

CSS

body { 
    padding: 0; 
    margin: 0; 
} 
#full-screen { 
    background: orange; 
    color: white; 
    width: 100%; 
    height: 100%; 
    position: absolute; // position absolute, and your code works 
    clip:auto; 
    overflow:hidden; 

}​ 

HTML

<div id="full-screen"></div>​ 

Votre code

$('#full-screen').animate({ 
"bottom":0, 
height: 'toggle'  
    }, 1000, function() { 
    // Animation complete. 
}); 

vous configurez le bottom de style t o 0 dans votre animate. Cela n'a aucun effet si vous n'utilisez pas le positionnement absolute sur votre élément.