在setInterval中停止jQuery动画函数，并将css opacity分配给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)

Answer 2

这是我设法达到我想要的结果的唯一方法。

var t = this;
t.$element.children( "[class='" + t.options.clonesClass + "']" ).each( $.proxy( function () {


    setTimeout( $.proxy( function () {
        i++;
        if ( i < t.options.slices ) {
            $( this ).animate( { opacity: 1 }, 1000 )

        } else {
            $( this ).animate( { opacity: 1 }, 1000, function () {
                t.$element.children( "[class='" + t.options.clonesClass + "']" ).css( "opacity", 0 );
            } );
        }


    }, this ), timeBuffer );
    timeBuffer += 50;


} ), this );