javascript - 在 setInterval 中停止 jQuery animate 函数并将 css 不透明度指定为 0

Question

在 jQuery 中的 animate 函数完成将不透明度值从 0 更改为 1 后，我在将不透明度设置为 0 时遇到问题。任何帮助将不胜感激。

var i = -1;
var interval = setInterval($.proxy(function () {
    i++;
    if (i >= this.options.slices) {
        clearInterval(interval);
        this.$element.children("[class='" + this.options.clonesClass + "']" ).css("opacity", 0);
    } else {
        this.$element.children("[data-index='" + i + "']").stop().animate({ opacity: 1 }, 1000);
    }
}, this), 50)

Answer 1

查看animate docs 。如果您想要实现的是在 animate 完成后执行某个操作，请将执行该操作的函数作为最后一个参数传递给 animate。

基本上就是这样

this.$element.children("[data-index='" + i + "']").stop().animate({ opacity: 1 }, 1000)

应该变成这样

this.$element.children("[data-index='" + i + "']").stop().animate({ opacity: 1 }, 1000, function(){
    $element.css({opacity:0});
})

编辑:

jQuery 并不真正需要使用间隔。假设你想要动画的元素是$element，只需执行

$element.stop().animate({ opacity: 1 }, 1000, function(){
    $element.css({opacity:0});
})

编辑:

要实现您在评论中描述的内容，您需要按顺序链接动画调用。我会推荐像这样的递归构造(伪代码):

function myAnimate(elementsArray, num) {
  if (num < elementsArray.size) {
    $(elementsArray[num]).animate({ opacity: 1 }, 1000, function(){
      myAnimate(elementsArray, num + 1);
    })
  } else {
    for each el in elementsArray {
      $(el).css({opacity:0});
    }
    // do other things, like prepare for next iteration
    // then maybe call myAnimate(elementsArray, 0)
    // to start all over again
  }
}

然后这样调用它

myAnimate($('div.toBeAnimated'), 0)