1

作成したギャラリー スクリプトに問題があります。基本的に、一連のサムネイルと矢印付きの大きな画像があります。サムネイルをクリックすると、現在の画像がフェードアウトし、新しい画像が読み込まれるとフェードインします。私が抱えている問題は、遷移中にサムネイルまたは矢印を何度もクリックすると (まるで現在表示されている画像を変更する)、プロセス全体が遅れ始めます。クリックすればするほど、遅延が表示されます。

フェード トランジションの途中で 5 回クリックするとします。現在のトランジションが終了した後、別のサムネイル/矢印をクリックすると、スクリプトの効果が想定どおりにすぐに開始されず、数秒間遅れてから開始されます。

これが私のスクリプトです：

$(".jTscroller a").click(function(event) {
    event.preventDefault();
    var last = $("#photo").attr("src");                 
    var target = $(this).attr("href");
    if (last != target) {
        $("#photo").stop(false,false).fadeTo("fast", 0, function() {
            $("#photo").attr("src",target);
            $("#photo").load(function() {
                $("#photo").fadeTo("fast", 1);
            });
        });
    };
});
$("#photo-area .arrow.left").click(function(event) {
    event.preventDefault();
    var current = $("#photo-area #photo").attr("src");
    var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
    var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
    if (typeof prev != "undefined") {
        if (prev != current) {
            $("#photo").stop(false,false).fadeTo("fast", 0, function() {
                $("#photo").attr("src",prev);
                $("#photo").load(function() {
                    $("#photo").fadeTo("fast");
                });
            });
        };
    };
});
$("#photo-area .arrow.right").click(function(event) {
    event.preventDefault();
    var current = $("#photo-area #photo").attr("src");
    var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
    var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
    if (typeof next != "undefined") {
        if (next != current) {
            $("#photo").stop(false,false).fadeTo("fast", 0, function() {
                $("#photo").attr("src",next);
                $("#photo").load(function() {
                    $("#photo").fadeTo("fast", 1);
                });
            });
        };
    };
});

JS フィドル: http://jsfiddle.net/G5VAf/7/

修正のための私の理論は、アニメーションの完了時に変更されるブール変数を追加することですが、50 回試してみましたがうまくいきませんでした。うまくいけば、私よりも熟練した誰かがそれを理解できるでしょう。

ああ、私はそれを 1 つの小さなスクリプトに縮小する必要があることを知っています。その道をさらに進む前に、これを機能させようとしています...

更新: 以下で説明するキューの実装を試みましたが、今ではまったくフェードインしません。

$("#photo").animate({
    opacity: 0
}, {queue: false, duration: 500}, function() {
    $("#photo").attr("src",target);
    $("#photo").load(function() {
        $("#photo").animate({
            opacity: 1
        });
    });
});

更新 2: わかりました。最終的なスクリプト:

$(document).ready(function() {
    $(".jTscroller a").click(function(event) {
        event.preventDefault();
        var last = $("#photo").attr("src");                 
        var target = $(this).attr("href");
        if (last != target) {
            $("#photo").stop(false,true).animate({
                opacity: 0
            }, {queue: false, duration: 500, complete: function() {
                $("#photo").attr("src",target);
                $("#photo").load(function() {
                    $("#photo").stop(false,false).animate({
                        opacity: 1
                    }, {queue: false, duration: 500});
                });
            }});
        };
    });
    $("#photo-area .arrow.left").click(function(event) {
        event.preventDefault();
        var current = $("#photo-area #photo").attr("src");
        var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
        var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
        if (typeof prev != "undefined") {
            if (prev != current) {
                $("#photo").stop(false,true).animate({
                    opacity: 0
                }, {queue: false, duration: 500, complete: function() {
                    $("#photo").attr("src",prev);
                    $("#photo").load(function() {
                        $("#photo").stop(false,false).animate({
                            opacity: 1
                        }, {queue: false, duration: 500});
                    });
                }});
            };
        };
    });
    $("#photo-area .arrow.right").click(function(event) {
        event.preventDefault();
        var current = $("#photo-area #photo").attr("src");
        var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
        var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
        if (typeof next != "undefined") {
            if (next != current) {
                $("#photo").stop(false,true).animate({
                    opacity: 0
                    }, {queue: false, duration: 500, complete: function() {
                    $("#photo").attr("src",next);
                    $("#photo").load(function() {
                        $("#photo").stop(false,false).animate({
                            opacity: 1
                        }, {queue: false, duration: 500});
                    });
                }});
            };
        };
    });
});
4

1 に答える 1

1

アニメーション キューに問題があるようです。使用している jQuery 関数は、.animate()関数の省略形です。

.animate( properties, options )

  queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.

基本的に、各クリックはアニメーションキューに追加されるため、遅延が発生します。関数を試して.animate()キューを設定しfalse、それが役立つかどうかを確認できます。

于 2012-08-08T20:15:03.117 に答える