JQuery Animate

Question

真的很容易，我敢肯定...

我有一个div，它是全屏幕，我希望它从顶部向下滑动到底部。

我有这样的：

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

但这是南辕北辙的底部向上移动;我该如何获得底部保持的位置以及顶部向下滑动以满足它？

感谢

Answer 1

您还需要动画div的“top”属性，以及禁用动画队列，以便这两个动画发生在同一时间。

$('#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} 
);​ 

试一试jsFiddle。

Answer 2

可以使用marginTop它：

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

看到：http://jsbin.com/esotu3

Answer 3

你确切的代码工作正常时，你有元素绝对定位。

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>​ 

您的代码

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

你设置bottom款T在您的animate中为0。如果您不在元素上使用absolute定位，则这不起作用。