JQuery Animate

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

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.

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.

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