JQuery Animate.

Question

Hi

Really easy, I'm sure...

I have a div which is the full screen and I want it to slide down from the top to the bottom.

I have this:

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

But this is the wrong way round as the bottom moves up; how do I get the bottom to stay where is is and the top to slide down to meet it?

Thanks

Answer 1

You need to also animate the 'top' property of the div as well as disabling the animation queue so both animations happen at the same time.

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

Try it out over at jsFiddle.

Answer 2

You can use marginTop for it:

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

see at: http://jsbin.com/esotu3

Answer 3

Your exact code works fine when you have absolute positioning on the element.

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

Your code

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

You're setting the bottom style to 0 in your animate. This has no effect if you don't use absolute positioning on your element.