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

最好使用这些函数而不是手动设置不透明度动画。

Answer 2

https://jsfiddle.net/sk8ruo3u/

我会这样做

var list = ['.one','.two','.three','.four'];

$.each(list, function(index, value){
    changeOpacity(value, index*1000);    
});

function changeOpacity(target, timeout) {
    setTimeout(function () {
        $(target).animate({
            opacity: 0.05
        }, 1000);
    }, timeout);
};