jQuery动画不能流畅运行

Question

我正在学习如何通过JavaScript来调度动画，特别是在jQuery的帮助下。我试图眨眼一些h1标签，但动画似乎并不流利。它停一会儿然后继续。
核心动画代码：

function animSlideHeading() { 
    $('.slide h1').animate({ 
    opacity: .6 
    }, 500, 'swing', function() { 
    $('.slide h1').animate({ 
     opacity: 1 
    }, 500, 'swing', animSlideHeading); 
    }); 
} 

见this JSBin。

Answer 1

有几个元素匹配选择器$('.slide h1')，所以回调函数被多次调用，每个元素被动画化一次，并且animSlideHeading运行的时间越长，它越长，搞乱了它。

为了解决这个问题，你可以使用当动画已经完成了收集集体

function animSlideHeading() { 
    $('.slide h1').animate({ 
     opacity: 0.6 
    }, 500, 'swing').promise().done(function() { 
     $(this).animate({ 
      opacity: 1 
     }, 500, 'swing').promise().done(animSlideHeading); 
    }); 
} 
animSlideHeading(); 

FIDDLE

中的所有元素解析承诺