jQuery如何在自己之后循环一个函数？

Question

我已经进行了大量的谷歌搜索，但似乎无法找到这个明显问题的答案！

我有 5 张图像堆叠在一起。我正在使用 .fadeTo(1000,0) 在 1000 毫秒内淡出第一张图像并显示下面的第二张图像。然后淡出第 2 个以显示第 3 个，直到达到第 5 个。然后我 .fadeIn(0,1) 所有的图像，所以我可以重复这个功能。

$(document).ready(function(){
    setInterval(function (){
            $('.map1').delay(1000).fadeTo(1000, 0);
            $('.map2').delay(2000).fadeTo(1000, 0);
            $('.map3').delay(3000).fadeTo(1000, 0);
            $('.map4').delay(4000).fadeTo(1000, 0);
            $('.map4').fadeTo(0, 1);
            $('.map3').fadeTo(0, 1);
            $('.map2').fadeTo(0, 1);
            $('.map1').fadeTo(0, 1);
        },5000)
});

问题是幻灯片/动画没有按顺序正确循环！它会从map1跳到map2再跳回map1，然后继续map3..etc 我知道可能有更好的方法来做到这一点，但到目前为止，我对 .animate 和 .slideshow （插件）的尝试都失败了。

有人可以帮我正确订购此代码吗？ 我正在使用 jQuery 和 Ruby on Rails（Ruby 2.1.5、Rails 4.2）

Answer 1

这是一种不同的方法，它使用一个循环并在循环的每次迭代中遍历对象列表，并使用动画完成函数来了解动画何时完成：

$(document).ready(function(){
    var items = $(".map1, .map2, .map3, .map4");
    var visibleIndex = 0;

    // establish initial opacity for only one of them visible
    items.css("opacity", 0);
    items.eq(0).css("opacity", 1);

    function next() {
        // fade out the currently visible item
        items.eq(visibleIndex).fadeTo(1000, 0);

        // at the same time, fade in the next item
        visibleIndex = ++visibleIndex % items.length;
        items.eq(visibleIndex).fadeTo(1000, 1, function() {
            // do a one second delay until the next loop is started
            setTimeout(next, 1000);
        });
    }

    // start the cycle
    next();
});

工作演示：http://jsfiddle.net/jfriend00/mLn0kznp/

上面的代码做了一个交叉淡入淡出（一个项目淡出，而另一个项目淡入）。

---

如果您希望一个项目淡出，并且只有在完成后，下一个项目才会开始淡入（不会同时淡入），那么您可以这样做：

$(document).ready(function(){
    var items = $(".map");
    var visibleIndex = 0;

    // establish initial opacity for only one of them visible
    items.css("opacity", 0);
    items.eq(0).css("opacity", 1);

    function next() {
        // fade out the currently visible item
        items.eq(visibleIndex).fadeTo(1000, 0, function() {
            // when done fading out, fade in the next item
            visibleIndex = ++visibleIndex % items.length;
            items.eq(visibleIndex).fadeTo(1000, 1, function() {
                // do a one second delay until the next loop is started
                 setTimeout(next, 1000);
            });
        });
    }

    next();
});

工作演示：http://jsfiddle.net/jfriend00/q26c72rz/

Answer 2

我会为此使用递归函数：

$(document).ready(function(){
 function animateMaps(i){
   if( i == $('.maps').length){
     $('.maps').fadeTo(0, 1);
   }
   else{
     $('.maps:eq('+i+')').animate({opacity: 0}, 1000, function() {
         // Animation complete call function again with next index:
         animateMaps(i+1)
     });
   }
 }
  //call function 
  animateMaps(0);
});

.maps{
  height:100px;
  width:100px;
  position:absolute;
  top:0;
  left:0;
  }

.blue{
  background-color:blue;
  z-index:4;
  }
.red{
  background-color:red;
  z-index:3;
  }
.green{
  background-color:green;
  z-index:2;
  }
.yellow{
  background-color:yellow;
  z-index:1;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maps blue"></div>
<div class="maps red"></div>
<div class="maps green"></div>
<div class="maps yellow"></div>