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

jQuery动画并不能流畅地运行

1 个答案: