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")

或使用vanilla JavaScript（兼容性较差）

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

在setInterval结束时调用函数

1 个答案: