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

Question

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

你可以在这里看到我的代码的jsfiddle版本：http://jsfiddle.net/BvLb4/3/

如您所见，我认为为左右徽标创建一个不同的类是并排放置两个徽标的好方法。所以我的 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>

我在更改单个徽标的递归循环以一次处理两个徽标时遇到问题：

$(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。这在我的脑海中是有道理的，但到目前为止，我实现它的尝试还没有成功，而且我通常不确定这是否是最好的方法，因为代码有点重复。您有什么建议作为一次淡入淡出两个（或更多）徽标循环的解决方案？

Answer 1

如果必须有循环，则需要将后面的调用移动到循环中：

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

在该淡出回调之外。 jQuery.fadeOut 只有在动画完成后才会调用您传递给它的函数（jQuery 淡出文档），这将导致以后以这种方式进行的调用是顺序的。 如果你像这样把它移到外面：

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

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

Answer 2

而不是循环，你需要这样做

   $([id^="img"]).delay(100)
    .fadeIn(fadeDuration)
    .delay(timeBetweenFade)
    .fadeOut( fadeDuration);

对 ID 以"img"开头的所有图像进行播放

Answer 3

似乎

没有一个答案可以解决问题，但我最终自己找到了解决方案。您可以在此处查看解决方案的演示：http://jsfiddle.net/BvLb4/9/。对于将来遇到此问题的任何人，都可以轻松更改您想要并排的图像数量。

这在很大程度上是一种菜鸟试错的方法，所以如果有人有任何改进建议，请发表评论！

.JS：

$(document).ready(function (){
    var fadeDuration = 1000;
    var timeBetweenFade = 3000;
    var totalCycles = ($('.logo').length) /2;
    var idx = 0;
    var loop = function(idx, totalCycles) {
        var currentLogo = ".img" + idx;
        $(currentLogo).delay(100);
        $(currentLogo).fadeIn(fadeDuration);
        $(currentLogo).delay(timeBetweenFade);
        $(currentLogo).fadeOut(fadeDuration,
        function(){
            idx++;
            if(idx > totalCycles){
                idx = 0;
            }
            loop( idx, totalCycles);
        });
    }
    loop(0, totalCycles);
});​

.HTML：

//link js and jquery here
<div id="container">
        <div id="logos_content">
        <h2>Associates</h2>
        <div class="logo img0">
        <img src="http://i.imgur.com/JeBWX.jpg"/>
        </div>
        <div class="logo img0">
        <img src="http://i.imgur.com/DyyY3.jpg"/>
        </div>
        <div class="logo img1">
        <img src="http://i.imgur.com/aVDZ1.jpg"/>
        </div>
        <div class="logo img1">
        <img src="http://i.imgur.com/JxLQt.jpg"/>
        </div>
        </div>
</div>

.CSS：

#container
{
    width: 400px;
    height: 200px;
    background-color: DodgerBlue;
}
img { max-width: 100% }
#logos_content
    {
    padding: 0.5em 3em;
    height: 150px;
    }
        .logo
        {
        float: left;        
        display: none;
        max-width: 45%;
        position:relative;
        margin-right:0.5em;
        }