多个 jquery 动画完成回调

Question

函数看起来像这样，我用 jquery animate 函数试试，但我认为 css transition 也可以这样做:)

$('a').on('click', function() { // click menu
  $('.animate_item').each(function() {
    $(this).fadeOut(fade_out_delay, function(){ // alot of animate_item start fadeout, delay time from html value data-delay
      $('.another_animate_item').each(function() { // after animate_item all fadeout, alot of another_animate_item fadein
        $(this).fadeIn(fade_in_delay);
      });
    });
  });
});

每个动画项目都有延迟时间，如何检测所有动画项目淡出是否完成并进行回调？

我在考虑...

手动设置更长的功能延迟时间可能有效，但它是手动的:(

获取动画项目的最大数据延迟时间，自动设置功能延迟可能更好？

或其他智能方法？

非常感谢:)

Answer 1

尝试

    $('a').on('click', function() { // click menu
      var len = $('.animate_item').length;
      $('.animate_item').each(function(i, el) {
        // alot of animate_item start fadeout, 
        // delay time from html value data-delay
        $(this).fadeOut($(this).data("delay"), function() { 
          if (i === len - 1) {
            console.log("abc")
            // do stuff
          }
          // after animate_item all fadeout, 
          // alot of another_animate_item fadein
         // $('.another_animate_item').each(function() { 
         //   $(this).fadeIn(fade_in_delay);
         // });
        });
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<a>click</a>
<div class="animate_item" data-delay="1000">a</div>
<div class="animate_item" data-delay="1000">b</div>
<div class="animate_item" data-delay="1000">c</div>

多个 jquery 动画完成回调

multiple jquery animate finish callback

jquery

animation

callback