jQuery animation problems

Question

What i'm attempting to do is on load up have the logo in the middle of the screen, then after 3 seconds animate it to the top of the screen and have the rest of the content fade in.

Here is my jQuery code:

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#slider-wrapper').hide();
            $("#logo").animate({ 
                bottom:'+=250px'
              }, 1500 );
            $('#slider-wrapper').fadeIn(2000);
            $('#slider').nivoSlider();
        });
</script>

So slider-wrapper is (at the moment) all of the content i want to fade in.

Can anyone think of the problem so far? At the moment, the logo isnt moving at all...

Answer 1

Make sure your logo has an absolute, relative or fixed position, otherwise top, bottom, left and right style attributes will have no effect.

Also, to have it happen in the order you want, you need to do the fade in the .animate() callback (so it runs when the animation completes), like this:

$('#slider-wrapper').hide();
$("#logo").animate({ bottom:'+=250px' }, 1500, function() {
  $('#slider-wrapper').fadeIn(2000);
});