2

http://jsfiddle.net/SVtJV/16/

$( document ).ready(function() {
    for (var i=0; i<3; i++) {
        setTimeout(function() {
            $("#footer-address").fadeOut(400);
        }, 2000);
        setTimeout(function() {
            $("#footer-address").fadeIn(400).html("<strong>Our Place</strong>  New Address Location");
        }, 2400);
        i++;
    }
});

setTimeoutforループで3回または4回実行する関数を含むコードブロックを取得しようとしています。setTimeout論理的には、おそらく時間値がすでに経過しているため、for ループ内のコードが繰り返されたくないことがわかります。

ループする前に時間値をリセットする方法はありますか? または、最終目標を達成するためのより良い方法はありますか?

4

3 に答える 3

2

各forループはタイムアウトが終了するのを待ちません。forループ全体は20ミリ秒以内に完了します。おそらく：Dフェードを繰り返したい場合は、コールバックを使用して小さな関数を実行する必要があります。

    $( document ).ready(function() {
    var repeats = 4,
        times = 0,
        fade = function() {
            if (times >= repeats) return false;
            times++;
            $('#footer-address').fadeTo(400, 0, function() {
                $('#footer-address').html('text 1');
                $('#footer-address').fadeTo(400, 1, function() {
                    setTimeout(fade, 1000);
                });
            }); 
        };

    setTimeout(fade, 1000);
});

そして、私はあなたがそこで.html（）で何をしようとしているのか全くわかりません。それを繰り返し変えませんか？

編集しました。

于 2013-02-26T17:14:09.847 に答える
0

他の人が言っているように、あなたはi2つの場所（for後付けとループの本体）でインクリメントしているので、本体の割り当てを削除することが最初に修正する部分です。また、元のHTMLは「元に戻され」ていません。

ただし、これは主な問題ではありません。JavaScriptはループを即座に（2回）実行するため、すべてのfadeOut / fadeIn関数は、期待どおりのタイムアウト後に実行されるのではなく、それぞれ2000/2400ミリ秒後に実行されます。これを確認するには、デモのの代わりにconsole.log(i);またはを配置し、ページが読み込まれるとすぐに3つのログ行/アラートを確認します。alert(i);i++

マークアップをJavaScriptで作成するのではなく、HTMLとして配置し、2つのHTMLフラグメント間でフェードインします。たとえば、デモまたは次のサンプルコードを参照してください。

HTML

<div id="footer-address">
    <span><strong>We have moved!</strong> Our new address is:</span>
    <span><strong>Our Place</strong>  New Address Location</span>
</div>

CSS

#footer-address {
    margin-bottom: 2px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
}

#footer-address span:last-child {
    display:none;
}

JavaScript（jQueryが必要）

var $footer = $('#footer-address');
var i = 0;

(function swap(){
    var $hiddenSpan = $footer.find('span:hidden')

    $footer.find('span:visible').fadeOut(400, function() {
        $hiddenSpan.fadeIn(400)
    })

    if (i++ < 3) setTimeout(swap, 2000)
})();

JavaScriptは、 2秒間隔で3回実行される自己実行関数（http://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/を参照）を使用します。また、jQuery関数のコールバック（2番目）パラメーターを利用して、fadeOutが終了した後にが開始されるようにします。.fadeOut().fadeIn()

ここには改善の余地があると思いますが、それでも役立つことを願っています。

于 2013-02-26T17:40:18.100 に答える
0

これが最もクリーンなソリューションだと思います

こちらのjsfiddleでご覧ください

$(function() {
    var times = 3,
        elem = $('#footer-address')
        fader = setInterval(function() {
            elem.fadeOut(400, function() {
                elem.fadeIn(400);
            });
            if (--times === 0) {
                clearInterval(fader);
            }
        }, 1200);
});

満足のいく結果が得られるまで、タイミングの数値を微調整します。

于 2013-02-26T17:30:54.723 に答える