动画队列

Question

我希望这是一个简单而小巧的东西，我很遗憾，但是目前，这段代码我已经同时将动画应用于所有三个div，我需要一个动画，然后一旦完成应用第二个动画，然后应用第三个动画完成。

这就是我所拥有的：

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

有人请帮忙！ ：（

Answer 1

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

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

Answer 2

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