-1

このアニメーションを毎回最初から繰り返してほしい（＃slide1）。

setTimeoutメソッドを試しましたが、機能しませんでした。タイミングの違いや（知識不足）ので、一行一行シンプルに使っています。ご協力いただきありがとうございます。

http://jsfiddle.net/q9EZg/6/

$(document).ready(function () {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, function () {});
});
});
});
});
});
});
});
});
});
});

<div id="slide1">Slide 1</div>
<div id="slide2">Slide 2</div>
<div id="slide3">Slide 3</div>
<div id="slide4">Slide 4</div>
<div id="slide5">Slide 5</div>
<div id="slide6">Slide 6</div>
<div id="slide7">Slide 7</div>
<div id="slide8">Slide 8</div>
<div id="slide9">Slide 9</div>
<div id="slide10">Slide 10</div>
4

5 に答える 5

1

次のJSFiddleを確認してください...

$(document).ready(function () {

    (function animate() {
        $("#slide1").fadeIn(2000, function () {
            $("#slide1").delay(4000).fadeOut(2000);
            $("#slide2").delay(6000).fadeIn(1000, function () {
                $("#slide3").fadeIn(1000, function () {
                    $("#slide4").fadeIn(1000, function () {
                        $("#slide5").fadeIn(1000, function () {
                            $("#slide6").fadeIn(1000, function () {
                                $("#slide7").fadeIn(1000, function () {
                                    $("#slide8").fadeIn(1000, function () {
                                        $("#slide9").fadeIn(1000, function () {
                                            $("div").delay(2000).fadeOut(1000, animate); // Call animate again
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });

    }()); // Call the animate function
});

最後のステップの後に再度呼び出される Animate 関数でコードをラップしました。

PS。はい、JSFiddleでJQueryを有効にするのを忘れていますが、それはあなたの質問ではなく、あなたの質問に関連していないと思います。

于 2013-01-25T18:38:09.443 に答える
0

私はすでにこの質問に一度答えました。複製：jQueryループコマンド
質問の編集を参照すると、私が2回回答したことがわかります。

$(document).ready(function me() {
    $("#slide1").fadeIn(100).delay(100).fadeOut(100, function () {
        (function startFade(slide, step) {
            if ((slide === 1) && (step === -1)) {
                setTimeout(me, 100);
            } else if (slide < 10) {
                $("#slide" + slide)[step === 1 ? "fadeIn" : "fadeOut"](100, function () {
                    startFade(slide + step, step);
                });
            } else {
                startFade(slide - step, -step);
            }
        }(2, 1));
    });
});
于 2013-01-28T12:28:54.667 に答える
0

アニメーションをキューに入れる良い方法が必要な場合は、次のように、命令を含むオブジェクトを含むアニメーション キュー配列を作成できます。

var animationQueueArr = [
    {
        selector: '#slide1',
        delay: 4000,
        animation: 'fadeIn',
        duration: 2000,
        callback: true
    },
    {
        selector: '#slide1',
        animation: 'fadeOut',
        duration: 2000,
        callback: false
    },
    {
        selector: '#slide2',
        delay: 6000,
        animation: 'fadeIn',
        duration: 2000,
        callback: true
    }
    // and so on
];

次に、それらをループできます。

function animate (i, skipDelayBool) {
    skipDelayBool = skipDelayBool || false;
    var animationObj = animationQueueArr[i];
    if (animationObj.delay && false === skipDelayBool) {
        return setTimeout(function () {
            animate(i, true);
        }, animationObj.delay);
    }
    if (false === animationObj.callback) {
        $(animationObj.selector)[animationObj.animation](animationObj.duration);
        i += 1;
        i %= animationQueueArr.length;  // reset back to 0 if necessary to start new loop
        animate(i);
    } else {
        $(animationObj.selector)[animationObj.animation](animationObj.duration,
        function () {
            i += 1;
            i %= animationQueueArr.length;
            animate(i);
        );
    }
}


animate(0);

私はこれをテストしていないことに注意してください.

于 2013-01-25T19:40:18.907 に答える
0

メインのアニメーション ロジックを関数でラップします (これは既に実行済みです)。このような：

function Animate() {
   //your animation logic
}

そして、一定の間隔で同じ関数を呼び出します。このような：

setInterval(function(){
   Animate()
}, 1000);

ただし、メインロジックと構造を改善する必要があることは間違いありません。

于 2013-01-25T18:42:45.927 に答える
0

これを試して

JS コード

$(document).ready(function () {
    setInterval(intervalTest, 1000);
});

function intervalTest() {
    $("#slide1").fadeIn(2000, function () {
        $("#slide1").delay(4000).fadeOut(2000);
        $("#slide2").delay(6000).fadeIn(1000, function () {
            $("#slide3").fadeIn(1000, function () {
                $("#slide4").fadeIn(1000, function () {
                    $("#slide5").fadeIn(1000, function () {
                        $("#slide6").fadeIn(1000, function () {
                            $("#slide7").fadeIn(1000, function () {
                                $("#slide8").fadeIn(1000, function () {
                                    $("#slide9").fadeIn(1000, function () {
                                        $("div").delay(2000).fadeOut(1000, function () {});
                                    });
                                });
                            });
                        });
于 2013-01-25T18:45:13.187 に答える