0

jQueryでエフェクトを繰り返して、非常に基本的なスライドショーを作成しましたsetInterval。ただし、の各サイクル後のタイミングに不一致がありsetIntervalます。数サイクル後、2つの平行なスライド効果に目に見える不一致が生じます。

コードは

$(document).ready(function(){
var frontslides =$("#first li").length,
    slideTime=500,
    slideCycle=parseInt(slideTime*frontslides);

function frontSlide(){
    $("#first li").each(function(n){
        $(this).delay(slideTime*n).fadeIn(400).fadeOut(100);
        $("#second li").eq(n).delay(slideTime*n).fadeIn(400).fadeOut(100);
    });}
frontSlide();setInterval(frontSlide, slideCycle);});​

実例はこちら

あなたの貴重な時間を節約するために、その速度は速いですが、それはどんな速度でも起こります。数サイクル後、左右のスライドが同期しなくなったことがわかります。

4

3 に答える 3

4

最初のアプローチ：setTimeout

別の関数でトランジションを次のスライドに移動し、で呼び出すことができsetTimeoutます。次に、スライド番号を変数に格納し、各関数呼び出しの後にインクリメントします。

$(document).ready(function(){
    var firstSlides = $("#first li"),
        secondSlides = $("#second li"),
        nbSlides = firstSlides.length,
        slideTime = 500,
        nextSlide = 0;

    function slideshow() {
        firstSlides.eq(nextSlide).fadeIn(400).fadeOut(100);
        secondSlides.eq(nextSlide).fadeIn(400).fadeOut(100);

        nextSlide = (nextSlide+1) % nbSlides;
        setTimeout(slideshow, slideTime);
    }

    slideshow();
});

これがこの最初のアプローチのフィドルです。

2番目のアプローチ：約束

次のアニメーションを開始するときに両方のアニメーションが完了することを絶対に保証したい場合は、jQuery1.6の新しいpromiseを使用できます。両方のjQueryオブジェクトを呼び出し$.promise()て、その要素のすべてのアニメーションが完了したときに解決されるpromiseを取得できます。$.when(promises...)次に、指定されたすべてのPromiseが解決されたときに解決されるマスターPromiseを設定し、thenハンドラーを設定できます。

$(document).ready(function(){
    var firstSlides = $("#first li"),
        secondSlides = $("#second li"),
        nbSlides = firstSlides.length,
        fadeInTime = 400,
        fadeOutTime = 100,
        nextSlide = 0;

    function slideIn() {
        var p1 = firstSlides.eq(nextSlide).fadeIn(400).promise();
        var p2 = secondSlides.eq(nextSlide).fadeIn(400).promise();

        $.when(p1, p2).then(slideOut);
    }

    function slideOut() {
        var p1 = firstSlides.eq(nextSlide).fadeOut(100).promise();
        var p2 = secondSlides.eq(nextSlide).fadeOut(100).promise();

        nextSlide = (nextSlide+1) % nbSlides;

        $.when(p1, p2).then(slideIn);
    }

    slideIn();
});

単純なスライドショーの場合、おそらくほとんど違いに気付かないでしょう。ただし、Promiseを使用すると、同期を維持しながら、ファンキーなタイミングではるかに高度な遷移シーケンスを作成できます。

これがそのアプローチのフィドルです。

于 2012-06-15T16:20:09.313 に答える
2

両方が「同時に」実行されるようにアニメーションを設定します。

function frontSlide(){
    $("#first li").each(function(n){
        var _ = $(this);
        setTimeout(function() {
            _.fadeIn(400).fadeOut(100);
            $("#second li").eq(n).fadeIn(400).fadeOut(100);
        }, slideTime*n);
    });
}
于 2012-06-15T16:12:38.607 に答える
1

口を開けてから思いついたバージョンです。エフェクトループが現在実行中であることを示すフラグをそこに追加しましたblocked。これにより、スクリプトがオーバーランするのを防ぐことができます。factorまた、オーバーランが発生した場合にループがより速くループし、ループが中断されていないように見えるように値を追加しました。

他にご不明な点がございましたら、お気軽にお問い合わせください。それはかなり簡単です。

$(document).ready(function() {
    var $sel = $('#left, #right').find('li:first-child'),
        slidetime = 200,
        timein = 400,
        timeout = 100,
        blocked = false;

    var fadeout = function() {
        $sel.fadeOut(timeout, next);
    };

    var next = function() {
        if ($sel.is(':last-child')) {
            $sel = $sel.siblings(':first-child');
        } else {
            $sel = $sel.next();
        }

        blocked = false;
    };

    (function slider() {
        var factor = .2;

        if (!blocked) {
            factor = 1;
            blocked = true;

            $sel.fadeIn(timein, fadeout);
        }

        setTimeout(slider, slidetime * factor);
    })();
});​

http://jsfiddle.net/j63vH/

于 2012-06-15T19:26:21.240 に答える