javascript - 在 jQuery 中防止双重动画

Question

当用户点击速度太快时，如何阻止此功能发生两次？

$(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);
                });
            });
        };
    });
});

Answer 1

嗯，您在描述中使用了正确的词。使用 stop()

$("#photo").stop().fadeTo("fast", 0, function() {