JQuery Animate

Question

Действительно легко, я уверен ...

У меня есть div, который является полноэкранным, и я хочу, чтобы он скользил вниз сверху вниз.

У меня есть это:

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

Но это неправильный путь, когда дно движется вверх; как мне заставить дно оставаться там, где оно есть, и опускать верх, чтобы встретить его?

Спасибо

Answer 1

Ваш точный код отлично работает, когда у вас есть абсолютное позиционирование на элементе.

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 на 0 в вашем animate. Это не имеет никакого эффекта, если вы не используете absolute позиционирование на вашем элементе.

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

Вам также нужно анимировать свойство 'top' элемента div, а также отключить очередь анимации, чтобы обе анимации происходили одновременно.

$('#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 .