0

Word アニメーションをループするコールバック関数を作成しようとしています。各単語を特定の色でフェードインおよびフェードアウトする jquery 関数を作成しました。この小さなアニメーションが正しくループすることを望みます。問題は、関数をコールバックすると最初から開始されず、最後のコードが再び繰り返されることです。したがって、この例では、多目的というキーワードが 2 回表示されます。

私が言いたいことの一時的なサンプルを見るには、ここをクリックしてください。

これは私のjqueryコードです:

function wordfade(){
        $('#msg').fadeIn(2000, function() {
            $('#msg').html("Sustainable").css("color", "#3AE44E").delay(800).fadeOut(2000, function() {
                $('#msg').fadeIn(2000).html("Eye Catching").css("color", "#F18D0B").delay(800).fadeOut(2000, function(){
                    $('#msg').fadeIn(2000).html("Modern Design").css("color", "#0B8DF1").delay(800).fadeOut(2000, function(){
                        $('#msg').fadeIn(2000).html("Energy Efficient").css("color", "#AD0BF1").delay(800).fadeOut(2000, function(){
                            $('#msg').fadeIn(2000).html("Restaurant").css("color", "#F10B0B").delay(800).fadeOut(2000, function(){
                                $('#msg').fadeIn(2000).html("Retail & Pop-Up").css("color", "#C39813").delay(800).fadeOut(2000, function(){
                                    $('#msg').fadeIn(2000).html("Event Space").css("color", "#4FB186").delay(800).fadeOut(2000, function(){
                                        $('#msg').fadeIn(2000).html("Bar & Lounge").css("color", "#F10BA3").delay(800).fadeOut(2000, function(){
                                            $('#msg').fadeIn(2000).html("Residential").css("color", "#C7C7C7").delay(800).fadeOut(2000, function(){
                                                $('#msg').fadeIn(2000).html("Hotel & Lodging").css("color", "#565457").delay(800).fadeOut(2000, function(){
                                                    $('#msg').fadeIn(2000).html("Multi-Purpose").css("color", "#F1880B").delay(800).fadeOut(2000, wordfade);
                                                })
                                            })
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        });
    }
    wordfade();
4

4 に答える 4

6

関数の最初の行は a.fadeIn()を実行し、それが完了するまで待ってから.html()次の行に設定します。そのため、html コンテンツがまだ最後の単語である間に 2 回目はフェードインします。最初の 2 行を他の行と同じように組み合わせるだけで機能します。

function wordfade() {
    $('#msg').fadeIn(2000).html("Sustainable").css("color", "#3AE44E").delay(800).fadeOut(2000, function () {
        $('#msg').fadeIn(2000).html("Eye Catching").css("color", "#F18D0B").delay(800).fadeOut(2000, function () {
         // etc.

デモ: http://jsfiddle.net/PNDg4/

そして、非常に多くのネストされたコールバックを避けるために、全体を書き直すことを検討してください。

var words = [
    { word : "Sustainable", color : "#3AE44E" },
    { word : "Eye Catching", color : "#F18D0B" },
    { word : "Modern Design", color : "#0B8DF1" },
    { word : "Energy Efficient", color : "#AD0BF1" },
    /* etc */],
    current = -1;

function wordfade() {
    current = (current + 1) % words.length;
    $("#msg").html(words[current].word)
             .css("color", words[current].color)
             .fadeIn(2000)
             .delay(800)
             .fadeOut(2000, wordfade);
}
wordfade();

デモ: http://jsfiddle.net/PNDg4/1/

于 2013-10-03T12:48:29.027 に答える
3

優しい気持ちになりました…

var index = 0;
var words = [
    { text: "Sustainable", color: "#3AE44E" },
    { text: "Eye Catching", color: "#F18D0B" },
    { text: "Modern Design", color: "#0B8DF1" },
    { text: "Energy Efficient", color: "#AD0BF1" },
    { text: "Restaurant", color:  "#F10B0B" },
    { text: "Retail & Pop-Up", color:  "#C39813" },
    { text: "Event Space", color:  "#4FB186" },
    { text: "Bar & Lounge", color:  "#F10BA3" },
    { text: "Residential", color:  "#C7C7C7" },
    { text: "Hotel & Lodging", color:  "#565457" },
    { text: "Multi-Purpose", color:  "#F1880B" }];

function wordfade() {
    $("#msg")
        .html(words[index].text)
        .css("color", words[index].color)
        .fadeIn(2000).delay(800).fadeOut(2000, function() {
            index = ++index % words.length;
            wordfade();
        });
}

wordfade();

作業中の jsFiddle...

于 2013-10-03T12:59:19.827 に答える
1

$('#msg').fadeIn(2000, function() で始まるため、最後のコンテンツでフェード インします。2 番目のコンテンツと $('#msg').fadeIn(2000, function() を組み合わせる必要があります。行（テストしていません）

于 2013-10-03T12:42:31.237 に答える
1

問題は、関数の開始が #msg の内容でフェードアウトすることです

関数の最後のアクションは #msg を「多目的」に設定することであり、関数の開始は内容をフェードインすることです。関数の開始を #msg に設定し、フェードインするだけです。

于 2013-10-03T12:44:28.463 に答える