3

シンプルな画像ギャラリーで jQuery を使用しています。画像がフェードアウトし、src が変更され、フェードインします。

多くの場合、前の画像がフェード インします。要素が完全に不透明になると、新しい画像が表示されます。

新しいイメージへの遅延とその後のジャンプの原因は何ですか?

HTML

<div id="slide">
    <img src="/img/products/image1.jpg">
</div>

JS

var index = 0;

$(function() {
    if (srcs.length > 1) {
        setInterval("slide(800, 800)", 6000);
    }
});

function slide(o,i) {
    index++;
    if (index == srcs.length) index = 0;
    $("#slide img").fadeOut(o, function() {
        $(this).attr("src", path + srcs[index] + ext);
        $(this).fadeIn(i);
    });
}

編集:のコールバックを入れfadeIn()ましたが、毎回fadeOut()問題が顕著に発生します。画像は完全にフェードアウトし、次に完全にフェードインしてから変化します。

解決策:この回答では.each()、新しい画像の実行中に関数によってわずかなちらつきが発生しましたfadeIn()が、その部分を削除すると、これが.each()完全に修正されました。

4

3 に答える 3

1

私は、fadeOut のコールバック関数として、fadeIn 関数を追加することをお勧めします。こうすることで、新しい画像が読み込まれる前に -out アニメーションが確実に完了するようになります。

ドキュメントを参照してください: http://api.jquery.com/fadeOut/

$('#slide img').fadeOut(o, function() {
    // Animation complete.
    // Do fadeIn function here
});
于 2013-07-19T19:18:58.597 に答える
1

プリロード関数で次のようなことを試すことができます。

$.each(imgArray, function() {
    var i = new Image();
    i.src = path + this + ext;
});

ajax 呼び出しの代わりに、スライド関数でこれを試してください:

$('#slide img').fadeOut(o, function(){
    var that = this;
    this.src = path + srcs[index] + ext;
    this.onload = function() {
        $(that).fadeIn(i);
    };
});
于 2013-07-19T19:21:50.483 に答える