0

SOの助けを借りて、いくつかのロゴを循環させてフェードインおよびフェードアウトさせるJavaScript/jqueryが少しあります。横に並んでいる 2 つのロゴを同時にフェードするように変更しようとしています。

ここで私のコードの jsfiddle バージョンを見ることができます: http://jsfiddle.net/BvLb4/3/

ご覧のとおり、左右のロゴに異なるクラスを作成すると、2 つのロゴを並べて配置するのに適していると思いました。したがって、私の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>

1 つのロゴを一度に 2 つ操作するために使用した再帰ループを変更するのに問題があります。

$(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 増やすことでした。私の頭では理にかなっていますが、これまでのところ、それを実装する試みは成功しておらず、一般的にはそうではありません。コードが少し反復的であるため、とにかくそれが最善のアプローチであるかどうかを確認してください。一度に 2 つ (またはそれ以上) のロゴがフェードインおよびフェードアウトするループを取得するための解決策として何を提案しますか?

4

3 に答える 3

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 に答える
0

ループの代わりにそれをする必要があります

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

IDが「img」で始まるすべての画像に適用

于 2012-06-20T15:34:01.863 に答える
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 に答える