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

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

有人可以帮我正确排序这个代码吗？我在 Rails 上使用 jQuery 和 Ruby (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>

jQuery 如何在函数自身之后循环？

jQuery how to loop a function after itself?

jquery

loops

ruby-on-rails

slideshow

fadeto