Question

函数看起来像这样，我使用jquery animate函数试试，但我认为css转换也可以这样做：）

$('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 animate完成回调

1 个答案: