4

jQuery スライドショーに問題があり、それを理解できないようです。画像の移行中、スライドショーは次の画像にうまくフェードインするのではなく、白く点滅します。次のコード行と関係があると思います。

$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');

前のボタンと次のボタンをクリックすると、同じ問題が発生します。

これがスライドショーのjsFiddle です。

ありがとう！

4

6 に答える 6

4

私はあなたのコードをリファクタリングし、ここに投稿しました：

http://jsfiddle.net/salman/nyXUt/44/

主な変更点は次のとおりです。

ホワイト フラッシュの回避策: フェードアウトとフェードインを使用していました。2 つのアニメーションが一緒に開始されると、両方の画像が 1 点で 50% 透明になり、スライドが白っぽい (または背景色がかかった) ように見えます。私は別のアプローチを使用しました。z-index を使用して、「非表示にする」画像を「表示する」画像の前に配置し、「非表示にする」画像をフェードアウトします。

#slideshow .current {
    display: block;
    z-index: 1;
}
#slideshow .animate {
    display: block;
    z-index: 2;
}

nextItem.addClass("current");
prevItem.removeClass("current").addClass("animate").fadeOut(animDuration, function () {
    $(this).removeClass("animate").css("display", "");
});

setInterval と setTimeout : setInterval の代わりに setTimeout を使用しました。これにより、タイミングをより細かく制御できます。自動移行は、ユーザーが前へ/次へボタンで中断すると再スケジュールされます。

アニメーションのタイミング: アニメーションにコールバックを追加し.stop()て、アニメーションが重ならないようにしました。

于 2013-02-16T10:26:40.983 に答える
3

現在の画像をフェードアウトする前に次の画像を表示する必要があります。同時にこれを行う必要がありますfadeIn(1000)。.next（）画像のを次show()のように置き換えるだけですhttp://jsfiddle.net/nyXUt / 6 /

于 2013-02-14T13:23:24.407 に答える
2

問題は、フェードインと同時にフェードアウトしていることです。標準のイージング関数を使用すると、中間に両方の画像がほとんど見えず、画像があった場所に空白が残るポイントがあります。

これを修正するために、表示される画像がスタックの一番上になるように、画像の順序を入れ替えました。これで、現在表示されている画像の上に新しい画像を配置して、フェードインできます。新しい画像が完全に表示されたら、前の画像を非表示にします。これにより、移行がよりスムーズになります。

$('#slideshow img:first').appendTo('#slideshow');
$('#slideshow img:last').fadeIn(1000, 'swing', function() {
    $('#slideshow img:last').prev().hide();
});

ここに jsfiddle があります: http://jsfiddle.net/nyXUt/52/

于 2013-02-15T17:17:51.533 に答える
2

多分最小化fadeOut()、およびfadeIn()時間またはfadeOut(slow)

于 2013-02-07T19:10:00.290 に答える
2

jQueryアニメーションで（のみ）機能する遅延関数を使用してみることができます。

$('#slideshow img:first').fadeOut(1000).next().delay(1000).fadeIn(1000).end().appendTo('#slideshow');

ただし、ここで他のコメンターが述べているように、提供されたコールバックを使用する場合の最良の方法.

于 2013-02-16T11:03:14.097 に答える
2

次または前をクリックすると、間隔と前のアニメーションを停止する必要があります。

clearInterval(run);
$('#slideshow img').stop();

次の画像のフェードインが完了したら、間隔を再開します。つまり:

$('#slideshow img:last').fadeIn(1000, function() { run=setInterval("switchSlide()", speed);})

編集： スイッチボタンを1秒間に10回クリックした場合。約 20 のアニメーションが同時に実行されます。

編集: 画像が (自動またはその他の方法で) 切り替わっているときに [次へ] または [前へ] をクリックし、フェードが既に進行している場合、フェードは効果全体の時間間隔 (つまり 1 秒) でほぼフェードから完全にフェードに進みます。 . このとき、画像はほとんど白になります。

手動切り替えのフェードアウトをより速く設定した方がよい場合があります (300ms 以下など)。これにより、ユーザーエクスペリエンスも向上します。

編集： ここにフィドルがあります

コードは次のとおりです。

var speed = 4000;
run = setTimeout("switchSlide()", speed);
$(document).ready(function() {

    $('#caption').html($('#slideshow img:last').attr('title'));

    $('#previous').click(switchBack);
    $('#next').click(switchSlide);

});

function switchSlide() {
    clearInterval(run);
    $('#slideshow img').stop(true,true);
    var jq=$('#slideshow img');
    jq.first().css({'opacity':0}).appendTo('#slideshow').animate({'opacity':1}, 1000, function() { 
        run = setTimeout("switchSlide()", speed); } );
    $('#caption').html(jq.last().attr('title'));
}

function switchBack() {
    clearInterval(run);
    $('#slideshow img').stop(true,true);
    var jq=$('#slideshow img');
    jq.last().animate({'opacity':0},1000, function() { 
        $(this).prependTo('#slideshow').css({'opacity':1}); run = setTimeout("switchSlide()", speed);});
    $('#caption').html(jq.get(1).title);
}
于 2013-02-15T15:09:46.260 に答える