Question

I’m hoping this is something simple and small that I’m missing, but currently, This code I have applies the animation to all three divs at once, Where as I need one to animate, then once it’s finished apply the second animation, then apply the third once that’s finished.

Here’s what I have:

container.live('mouseenter',function(){ 
    $('.pop1').animate({ marginTop: '0px'}, 'slow').next().animate({marginTop: '0px'}, 'slow').animate({marginTop: '0px'}, 'slow');
});

Someone please help! 🙁

Answer 1

container.live('mouseenter',function() {
    var slideUp = function (el) {
      if (el.length) {
        el.animate({ marginTop: '0px' }, 'slow', function () { 
          slideUp(el.next()); 
        });
      }
    };

    slideUp($('.pop1'));
});