0

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

4

3 回答 3

0

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

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

在那个 fadeOut 回调之外。jQuery.fadeOut 只会在动画完成后调用你传入的函数（jQuery fadeOut 文档），这将导致以后以这种方式进行的调用是连续的。如果你像这样把它移到外面：

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

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

那么它应该表现得更像你希望的那样。

于 2012-06-20T13:35:19.380 回答
0

而不是循环你需要这样做

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

适用于 id 以“img”开头的所有图像

于 2012-06-20T15:34:01.863 回答
0

似乎没有一个答案可以解决问题，但我最终自己找到了解决方案。您可以在此处查看解决方案的演示：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;
        }
于 2012-06-20T16:07:52.803 回答