Getting a centered DIV to move down the page after a short delay

$(window).bind("load", function() {
   $('#container').fadeIn('800');
   $('#container').css({margin: '(0px auto 0px auto)'});
   $('#container').animate({margin: '(60px auto 0px auto)'}, 20000).delay(100);
});

I have the container to fade in but I'd like it to slide down 60px from the top margin after a delay. I can't get this to work for some reas开发者_高级运维on.

You need to chain your effects

$(window).bind("load", function() {
   $('#container').css({margin: '(0px auto 0px auto)'})
     .fadeIn(800)
     .delay(100)
     .animate({margin: '(60px auto 0px auto)'}, 20000);
});

fadeIn doesn't block while it executes, so the other two lines executed as soon as the fadeIn was called, not completed. fadeIn takes a callback parameter. Put your other 2 lines in an anonymous function as the callback.

I haven't tried it but I believe this should work.

$(window).bind("load", function() {
   $('#container').fadeIn('800', function() {
     $('#container').css({margin: '(0px auto 0px auto)'});
     $('#container').animate({margin: '(60px auto 0px auto)'}, 20000).delay(100);
   });
});