FadeIn和FadeOut互为不同的背景

Question

我下面的例子的问题是，最后一个背景没有像setInterval函数中计划的那样显示6秒，而是立即消失在第一个背景中。

当然，我希望它的行为与它们的其余部分一样。我不认为它改变了任何东西，但我的真实例子有图像的背景，而不是颜色，只是为了让这个例子更容易一些。

提前感谢您的帮助和时间！

​

var screen = 0,
  speed = 1000;

window.setInterval(function() {
  $(".background-" + ((screen % 4) + 1)).fadeOut(speed,
    function() {
      $(".background-" + (((screen + 1) % 4) + 1)).fadeIn(speed);
    });
  screen += 1
}, 6000);

.background-1 {
  background: red;
  z-index: 6;
  position: absolute;
}

.background-2 {
  background: blue;
  z-index: 5;
  position: absolute;
}

.background-3 {
  background: green;
  z-index: 4;
  position: absolute;
}

.background-4 {
  background: yellow;
  z-index: 3;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="background background-1">

  </div>
  <div class="background background-2">

  </div>
  <div class="background background-3">

  </div>
  <div class="background background-4">

  </div>
</div>

​

Answer 1

​

var screen = 0,
    speed = 1000;

    window.setInterval(function() {
       $(".background-" + ((screen % 4) + 1)).fadeOut(speed, 
       function() {
           $(".background-" + (((screen + 1) % 4) + 1)).fadeIn(speed);
             screen+=1
       });
    },6000);

.background-1 {
       background: red;
       z-index: 6;
       position: absolute;
    }
   .background-2 {
       background: blue;
       z-index: 5;
       position: absolute;
   }
   .background-3 {
       background: green;
       z-index: 4;
       position: absolute;
   }
   .background-4 {
       background: yellow;
       z-index: 3;
       position: absolute;
   }
   .wrapper{
   width:400px;
   }
   .background {
    width: 200px;
    height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="wrapper">
                <div class="background background-1">

                </div>
                <div class="background background-2">

                </div>
                <div class="background background-3">

                </div>
                <div class="background background-4">

                </div>
            </div>

​

在screen的回调函数中设置变量fadeout增量。

Answer 2

<script>
    $(function () {
        var speed = 1000;
        var counter = 0
        var divlist = $('.background-1, .background-2, .background-3,.background-4');

        function showDiv() {
            divlist.fadeOut(speed)
                .filter(function (index) { return index == counter % 3; })
                .fadeIn(speed);

            counter++;
        };

        showDiv();

        setInterval(function () {
            showDiv();
        }, 6000);
    });
</script>


<div class="wrapper">
    <div class="background background-1">
        111111111111111111
    </div>
    <div class="background background-2">
        22222222222222222222
    </div>
    <div class="background background-3">
        33333333333333333333333333
    </div>
    <div class="background background-4">
        4444444444444444444444444
    </div>
</div>