javascript - 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 运行的时间越长，运行的次数就越多，把它搞得一团糟。

要解决这个问题，您可以使用 promises，当动画完成时集中处理集合中的所有元素

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

FIDDLE