5

目前我有一些设置，用户单击图像并基于该图像，div 将淡入/淡出。

如果用户发疯并同时单击一堆图像，则会加载多个 div，而不仅仅是最后一个请求的。

我试图在这里说明我的问题。 http://jsfiddle.net/BBgsf/

单击这些图像中的任何一个都将加载带有数字的相应 div。但是，如果您在动画完成之前单击不同的图像，它也会加载其他 div。

jQuery

$(".flow-chart img").click(function () {

    var div_class = $(this).data("class");

    $(".hide_show:visible").fadeOut('slow', function() {
        $("."+div_class).fadeIn("slow");
    });

});

HTML 

<div class="1 hide_show">1</div>
<div class="2 hide_show" style="display: none">2</div>
<div class="3 hide_show" style="display: none">3</div>

如何防止加载多个 div 而不是一次加载一个？

​</p>

4

2 回答 2

8

虽然您已经得到了答案.. 您可以检查是否有使用:animated选择器进行动画处理的任何元素.. 以及是否有返回 false

$(".flow-chart img").click(function() {
    if ($(".hide_show").filter(':animated').length > 0) {
        return false;
    }
    var div_class = $(this).data("class");    
    $(".hide_show:visible").fadeOut('slow', function() {
        $("." + div_class).fadeIn("slow");
    });

});​

http://jsfiddle.net/FaKBs/

于 2012-12-04T19:50:20.293 回答
7

一种方法是跟踪动画当前是否处于活动状态。这是一个简单的方法：http: //jsfiddle.net/QCWgR/

var active = false;

$(".flow-chart img").click(function () {
    if (active) {
        return;
    }
    active = true;        
    var div_class = $(this).data("class");

    $(".hide_show:visible").fadeOut('slow', function() {
        // note the callback that sets active to false at end of animation
        $("."+div_class).fadeIn("slow", function() { active = false; });
    });

});

使用这种方法，第一次点击必须在下一次发生之前完成动画循环。

使用闭包使活动远离全局命名空间

为了使全局命名空间保持活动状态，您可以在匿名闭包内运行整个块，如下所示：

http://jsfiddle.net/QCWgR/2/

(function () {
    var active = false;

    $(".flow-chart img").click(function () {
        if (active) {
            return;
        }
        active = true;        
        var div_class = $(this).data("class");

        $(".hide_show:visible").fadeOut('slow', function() {
            $("."+div_class).fadeIn("slow", function() { active = false; });
        });

    });
})();​
于 2012-12-04T18:56:14.933 回答