0

javascriptなどの初心者で、jqueryを使用してロゴをフェードするためのループを作成しようとしています。

私はそれをうまく循環させています。しかし、私はループを連続的にしようとしました。最後のロゴに到達すると、最後のロゴに到達するたびにカウンターを0にリセットすることで、最初に戻ります。これにより、ブラウザがクラッシュしたと思われる無限ループが発生しました。だから私は簡単なグーグルをして、window.setInterval（...）タイマー関数を発見しました。

私の問題は、ループコードの起動がタイミングに依存しているため、間隔時間を計算する方法がわからないことです。参考までに、ロゴをフェードインおよびフェードアウトするコードを次に示します（ループを試みる前に）。

$(document).ready(function (){

    var fadeDuration = 1000;
    var timeBetweenFade = 2000;
    var totalTimePerChange = fadeDuration + timeBetweenFade;
    var totalLogos = $('.logo').length;
    var currentLogo;
    var i;

        for(i = 0; i < totalLogos; i++)
        {
            currentLogo = "#img" + i;
            if(i == 0){
                $(currentLogo).fadeIn(fadeDuration).delay(timeBetweenFade).fadeOut(fadeDuration);
                }
            else{ //general case
                $(currentLogo).delay(totalTimePerChange * i).fadeIn(fadeDuration).delay(timeBetweenFade).fadeOut(fadeDuration);
            }
        }
});

いくつかの方法で、完全なループにかかる時間を取得しようとしました。

$(document).ready(function (){

    //..declarations..

    window.setInterval( function() {
        //..FOR LOOP HERE..
    }, i*(fadeDuration + timeBetweenFade + fadeDuration));
});

//I also tried..

$(document).ready(function (){

    //..declarations..
    var timeTakenToLoop;
    var startLoopTime;

    window.setInterval( function() {
    startLoopTime = new Date().getTime();
        //...FOR LOOP HERE..
    timeTakenToLoop = new Date().getTime() - startLoopTime;
    }, timeTakenToLoop);
});

しかし、どちらの場合も、関数呼び出しのタイミングが間違っているため、ロゴが重なり始めます。もう少し経験のある人が最善のアプローチを提案できますか？

ああ、誰かがjavascriptを理解するためにそれを必要とする場合に備えて、ここに一致するhtmlがあります。

    <div id="img0" class="logo">
    <img src="{% static "CSS/Images/phone_icon.gif" %}"/>
    </div>
    <div id="img1" class="logo">
    <img src="{% static "CSS/Images/email_icon.gif" %}"/>
    </div>
    <div id="img2" class="logo">I can fade too</div>
4

1 に答える 1

2

単純なjQueryアプローチ、nosetTimeoutおよびno setInterval。

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

こちらをご覧ください。

于 2012-06-19T11:35:00.773 に答える