检测每个（）中最后一个元素的动画结束

我有一个SVG路径的动画，我想例如。在路径中最后一个元素之后的addClass用动画完成。我试图为animate（）添加回调，但它不起作用，它在第一个循环结束时开始。然后我尝试了.when（startAnimeDude（））。然后（doStuff（）），但它也从头开始。最后，我尝试的是i == i.length -1，并且它从一开始就开始了（而动画仍在继续）。我错过了什么？感谢您的阅读。检测每个（）中最后一个元素的动画结束

DEMO：http://jsfiddle.net/18yunbhk/

var anim = function() { 

    $.extend(jQuery.easing, { 
     easeInOutQuad: function (x, t, b, c, d) { 
      if ((t /= d/2) < 1) return c/2 * t * t + b; 
      return -c/2 * ((--t) * (t - 2) - 1) + b; 
     } 
    }); 

    var animeDude = function (parent, min, max, delayAnim) { 
     var paths = $('svg').find('path'); 

     $.each(paths, function (i) { 
      var totalLength = this.getTotalLength(); 

      $(this).css({ 
       'stroke-dashoffset': totalLength, 
       'stroke-dasharray': totalLength + ' ' + totalLength 
      }); 
      $(this).delay(delayAnim * i).animate({ 
       'stroke-dashoffset': 0 
      }, { 
       duration: Math.floor(Math.random() * max) + min, 
       easing: 'easeInOutQuad' 
      }); 

      if (i == 12) { //12 is last element 
       console.log('sad'); 
      } 

     }); 
    }; 

    var startAnimeDude = function (parent) { 
     animeDude(parent, 0, 1000, 40); 
    }; 
    startAnimeDude($('svg')); 


}; 
anim();

来源

2015-12-13 Joe Koker

喜欢的东西

if (i === (paths.length - 1)) { 
    console.log("sad"); 
}

JSFIDDLE

如果您只希望在动画完成时检查条件，那么您可以将这段代码写入动画的回调函数中。

$(this).delay(delayAnim * i).animate({ 
    'stroke-dashoffset': 0 
}, { 
     duration: Math.floor(Math.random() * max) + min, 
     easing: 'easeInOutQuad', 
     complete: function() { 
      if (i === (paths.length - 1)) { //12 is last element 
       console.log('sad'); 
      } 
     } 
});

来源

2015-12-13 21:23:30 rahul

感谢，但它不工作，其同样的问题......“伤心”是打印出来的时候，动画开始，我需要做的是，当最后一个元素与动画 –

对不起，是我不好做。错过了-1。编辑代码并应该正常工作。 – rahul

其实我用 - 1 ... http://jsfiddle.net/4xf6g2eL/1/当你打开控制台并运行片段，你可以看到，'悲伤'打印出来，而动画还在。 ..我认为问题是，每个循环立即在每个路径，所以它的工作原理是正确的，但.delay（）正在创建这个问题 –

检测每个（）中最后一个元素的动画结束

回答

相关问题