jquery - 在 setInterval 结束时调用函数

Question

我想将不透明度设置回 1。

 setInterval(function() {
    $('li:first')
    .animate({ opacity: "0" }, 1000, function() { $(this).hide(); })
    .next().show()
    .end().appendTo('ul');
  }, 5000);

我可以在动画之后执行所有步骤，如下所示。它正在做我想要的事情，但这是一个非常糟糕的主意。

setInterval(function() {
   $('li:first')
   .animate({ opacity: "0" }, 1000, function() { 
      $(this).hide();
      $(this).next().show();
      $(this).appendTo("ul");
      $(this).css("opacity", "1")})
}, 5000);

Answer 1

如何使用 CSS 转换和切换类(使用 jQuery)来动画隐藏和显示元素？

foo{transition: opacity 1s}

.hide{opacity: 0; visibility: hidden;}
.show{opacity: 1; visibility: visible;}

现在使用 jQuery 只需切换隐藏和显示类

$(foo).removeClass("show").addClass("hide") 
$(foo).removeClass("hide").addClass("show")

或者使用普通 JavaScript(兼容性较差)

foo.classList.toggle("hide")
foo.classList.toggle("show")