jQuery动画顺序延迟答案

【问题标题】：jQuery animation in order delayjQuery动画顺序延迟
【发布时间】：2014-09-30 19:15:59
【问题描述】：

嘿，我想按顺序调出动画。目前，即使使用 delay 函数，下面的代码似乎同时将它们全部调用（这似乎根本不起作用......）

$(".overlayChoice1").delay(500).animate({
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })               
$(".overlayChoice2").delay(500).animate({
    top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice3").delay(500).animate({
    top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice4").delay(500).animate({
    top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' })

我需要做什么才能一次执行一个？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-animate

【解决方案1】：

如果您希望动画按顺序发生，您应该将每个动画嵌套在先前的 complete 回调中：

$(".overlayChoice1").delay(500).animate({
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
    $(".overlayChoice2").delay(500).animate({
       top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
       $(".overlayChoice3").delay(500).animate({
         top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
            $(".overlayChoice4").delay(500).animate({
    top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' });
        })
    })
})

.animate参考：http://api.jquery.com/animate/

【讨论】：

【解决方案2】：

您要么需要发送下一个作为回调，要么使用增量延迟。

回调：

$(".overlayChoice1").delay(500).animate({
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
    $(".overlayChoice2").delay(500).animate({
        top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
        $(".overlayChoice3").delay(500).animate({
            top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
            $(".overlayChoice4").delay(500).animate({
                top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
            });
        });
    });
});

增量延迟：

$(".overlayChoice1").delay(500).animate({
    top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })               
$(".overlayChoice2").delay(2700).animate({
    top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice3").delay(4900).animate({
    top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice4").delay(7100).animate({
    top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' })

【讨论】：

【解决方案3】：

  $(".overlayChoice1").animate({ top: '-15px' }, 1700, "easeOutElastic", function() {
    // Animation overlayChoice1 complete.
    $(".overlayChoice2").animate({ top: '-45px' }, 1700, "easeOutElastic", function() {
      // Animation overlayChoice2 complete.
      .....
    } })
  });

【讨论】：

【解决方案4】：

就个人而言，我会使用更多的DRY implementation，它不会重复太多代码并根据前一个的完成回调触发下一个动画：

function runAnimations() {
    var cntr = 1, top = -15;
    function next() {
        if (cntr <= 4) {
            $(".overlayChoice" + cntr).delay(500)
              .animate({top:top+'px'}, {duration:1700, easing:'easeOutElastic'}, next);
            ++cntr;
            top -= 30;
        }
    }
    next();
}

【讨论】：