3

ユーザーのクリックが速すぎる場合に、この機能が2回発生しないようにするにはどうすればよいですか？

$(document).ready(function() {
    $(".jTscroller a").click(function(event) {
        event.preventDefault();
        var target = $(this).attr("href");
        $("#photo").fadeTo("fast", 0, function() {
            $("#photo").attr("src",target);
            $("#photo").load(function() {
                $("#photo").fadeTo("fast", 1);
            });
        });
    });
});

私が抱えている問題は、ユーザーがクリックする速度が速すぎると、要素がフェードインしない場合、非表示のままになることです。

問題は私が思っていたものではありませんでした。同じサムネイルをクリックすると、同じ画像を読み込んで永久に貼り付けようとします。.stop()答えはダブルアニメーションを修正するので、私はその答えを受け入れますが、私の解決策は、最後にクリックされたアイテムが現在表示されているアイテムであるかどうかを確認することでした。新しいスクリプト：

$(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().fadeTo("fast", 0, function() {
                $("#photo").attr("src",target);
                $("#photo").load(function() {
                    $("#photo").fadeTo("fast", 1);
                });
            });
        };
    });
});
4

6 に答える 6

4

さて、あなたはあなたの記述で正しい単語を使用します。stop（）を使用します

$("#photo").stop().fadeTo("fast", 0, function() {
于 2012-08-01T14:06:53.130 に答える
0

関数を使用して、setTimeoutクリックグラブ間の遅延を作成できます。つまり、2回目のクリックは、最初のクリックの後、しばらくしてからのみ処理されます。クリックの間隔を設定します。

于 2012-08-01T14:07:20.103 に答える
0

あなたが探しているのは.stop() http://api.jquery.com/stop/だと思います

$("#photo").stop(false, false).fadeTo()
于 2012-08-01T14:07:22.220 に答える
0 
$(document).ready(function() {
    var loaded = true;
    $(".jTscroller a").click(function(event) {
        if(!loaded) return;
        loaded = false;
        event.preventDefault();
        var target = $(this).attr("href");
        $("#photo").fadeTo("fast", 0, function() {
            $("#photo").attr("src",target);
            $("#photo").load(function() {
                $("#photo").fadeTo("fast", 1);
                loaded = true;
            });
        });
    });
});

その状態を追跡します

于 2012-08-01T14:07:26.030 に答える
0

私はこのようにそれを防ぐでしょう：

var photo = $("#photo");
if (0 == photo.queue("fx").length) {
     foto.fadeTo();
}

stopこの要素のすべてのアニメーションが完了したときにのみ起動するため、私は異なります。また、要素を変数に格納すると、セレクターが要素を1回だけ取得する必要があるため、時間を節約できます。

于 2012-08-01T14:08:48.730 に答える
0

on（）とoff（ ）を使用します：

$(document).ready(function() {
    $(".jTscroller a").on('click', changeImage);

    function changeImage(e) {
        e.preventDefault();
        $(e.target).off('click');
        $("#photo").fadeOut("fast", function() {
            this.src = e.target.href;
            this.onload = function() {
                $(this).fadeIn("fast");
                $(e.target).on('click', changeImage);
            });
        });
    }
});
于 2012-08-01T14:15:06.017 に答える