javascript - 一次两个对象的 JQuery 淡入淡出循环

Question

在 SO 的帮助下，我有一些 javascript/jquery 可以循环浏览一些 Logo ，使它们淡入淡出。我一直在尝试修改它以同时淡化两个并排的 Logo 。

您可以在此处查看我的代码的 jsfiddle 版本:http://jsfiddle.net/BvLb4/3/

如您所见，我认为为左右 Logo 创建不同的类是并排放置两个 Logo 的好方法。所以我的 html 现在看起来像这样:

        <div id="img0" class="logo">
        <img src="http://i.imgur.com/JeBWX.jpg"/>
        </div>
        <div id="img1" class="logo2">
        <img src="http://i.imgur.com/DyyY3.jpg"/>
        </div>
        <div id="img2" class="logo">
        <img src="http://i.imgur.com/aVDZ1.jpg"/>
        </div>
        <div id="img3" class="logo2">
        <img src="http://i.imgur.com/JxLQt.jpg"/>
        </div>

我在更改递归循环时遇到了麻烦，我一次只能使用一个 Logo 来处理两个 Logo :

$(document).ready(function (){

    var fadeDuration = 1000;
    var timeBetweenFade = 3000;
    var totalLogos = $('.logo').length + $('.logo2').length;
    var currentLogo;
    var idx = 0;

    var loop = function(idx, totalLogos) {
        var currentLogo = "#img" + idx;
        $(currentLogo)
        .delay(100)
        .fadeIn(fadeDuration)
        .delay(timeBetweenFade)
        .fadeOut(fadeDuration, function(){
            loop( (idx + 1) % totalLogos, totalLogos);
        });
    }
    loop(0, totalLogos);
});

我最初的想法是创建一个额外的 var currentLogo2 = "#img"+ (idx+1); ，将所有相同的方法应用于它以及 currentLogo 然后将 idx 递增2. 这在我看来是有道理的，但到目前为止 my attempts实现它并不成功，我通常不确定这是否是最好的方法，因为代码有点重复。对于一次淡入和淡出两个(或更多) Logo 循环的解决方案，您有什么建议？

Answer 1

如果一定要有循环，那么需要把后面的调用移到循环中:

loop( (idx + 1) % totalLogos, totalLogos);

在 fadeOut 回调之外。 jQuery.fadeOut 只会在动画完成后 ( jQuery fadeOut Documentation ) 调用您传递给它的函数，这将导致以后以这种方式进行的调用是连续的。如果你像这样把它移到外面:

var loop = function(idx, totalLogos) {
  var currentLogo = "#img" + idx;
  $(currentLogo)
  .delay(100)
  .fadeIn(fadeDuration)
  .delay(timeBetweenFade)
  .fadeOut(fadeDuration);

  loop( (idx + 1) % totalLogos, totalLogos);
}

那么它的行为应该更像您希望的那样。