javascript - jQuery CSS 不透明度动画

Question

因此，我正在尝试创建一个简单的渐变幻灯片放映，其中包含五张幻灯片，在完成后会重复播放。

我觉得我得到的东西应该有用，但事实并非如此。

<script type="text/javascript">

    $(document).ready(function() {

        function playslide(){

            setTimeout(function(){
            $("#slide-two").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 10000);
            setTimeout(function(){
            $("#slide-three").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 20000);
            setTimeout(function(){
            $("#slide-four").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 30000);
            setTimeout(function(){
            $("#slide-five").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 2000, 'swing')}, 40000);

        }

        playslide();

        });
</script>

想法是，第一张幻灯片的不透明度始终设置为 1，这样当最后一张幻灯片淡出时，就好像它重新开始一样。每张幻灯片将在淡出前保持 10 秒，每张幻灯片淡入后，上一张幻灯片的不透明度将设置回 0，为下一次重复播放做好准备。

我希望这不是一个明显的错误。抱歉，如果是...

Answer 1

请问为什么不使用 .fadeIn() 和 .fadeOut() 呢？

setTimeout(function () {
  $("#slide-two").fadeIn(400, function () {
    setTimeout(function () {
      $("#slide-two").fadeOut(function () {
      $("#slide-three").fadeIn(400, function () {
        // So on...
      });
    }, 1000);
  });
}, 1000);

最好使用这些函数来执行此操作，而不是手动设置不透明度动画。