Question

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

我有5张图像堆叠在彼此的顶部。我正在使用.fadeTo（1000,0）在1000毫秒内淡出第一张图像并显示第二张图像。然后淡出第二个以显示第三个，直到它达到第五个。然后我.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（插件）的尝试都失败了。

有人可以帮我正确订购此代码吗？我在Ruby on Rails上使用jQuery（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

我会使用递归函数：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery如何循环一个函数后呢？

2 个答案: