0

我有以下 js 功能，一旦点击事件发生，我想防止任何事情发生和排队。然后当函数结束时允许点击事件再次发生。

$("#tweet_activate a").click(function(){    
if($('body').hasClass('home')) {
$(this).parent().stop(true,true).animate({top: "+=154"}, 400).delay(1200).fadeOut();
} else {
$("#int_comp").animate({width: "+=157"}, 100);
$(this).parent().stop(true,true).animate({top: "+=154"}, 400).delay(1200).fadeOut();
}
$("#tweet_text").delay(400).animate({right: "+=56"}, 400);
$("#tweet").delay(900).animate({right: "+=214"}, 400);
$("#tweet_deactivate").delay(1200).fadeIn();
$("#tweet_text p, #tweet_text span, #tweet #links").delay(1200).fadeIn();
$("#eye").delay(600).fadeOut();
return false;
});

$("#tweet_deactivate a").click(function(){
if($('body').hasClass('home')) {
} else {
$("#int_comp").animate({width: "-=157"}, 400);
}
$("#tweet_text p, #tweet_text span, #tweet #links").fadeOut();
$("#tweet").stop(true,true).animate({right: "-=214"}, 400);
$("#tweet_text").delay(400).animate({right: "-=56"}, 400);
$(this).parent().delay(900).animate({top: "-=154"}, 400).delay(200).fadeOut()
.delay(600).animate({top: "+=154"}, 100);
$("#tweet_activate").animate({top: "-=154"}, 500).delay(650).fadeIn();
$("#eye").delay(1000).fadeIn();
return false;
});

该网站在这里 - http://danielhollandphotography.com/

如果您单击右侧图标网格上的“加号”，您将看到顺序发生。如果您在中途单击该图标，您将看到它再次触发。

谢谢，马特

4

1 回答 1

1

只需在元素上添加一个小检查。启动动画后，将布尔值设置为 true，单击时将其作为您的第一个检查

var animating = false;
$("#tweet_activate a").click(function() {
    if (animating !== true) {
        animating = true;
        if ($('body').hasClass('home')) {
            $(this).parent().stop(true, true).animate({
                top: "+=154"
            }, 400).delay(1200).fadeOut();
        } else {
            $("#int_comp").animate({
                width: "+=157"
            }, 100);
            $(this).parent().stop(true, true).animate({
                top: "+=154"
            }, 400).delay(1200).fadeOut();
        }
        $("#tweet_text").delay(400).animate({
            right: "+=56"
        }, 400);
        $("#tweet").delay(900).animate({
            right: "+=214"
        }, 400);
        $("#tweet_deactivate").delay(1200).fadeIn();
        $("#tweet_text p, #tweet_text span, #tweet #links").delay(1200).fadeIn();
        $("#eye").delay(600).fadeOut(function() {
            animating = false; // this is a guess. but place this where ever the animation is stopping. 
        });
    }
    return false;
});

这应该有效。试试看。

$("#tweet_activate a").click(function() {
    $this = $(this);
    if ($this.attr("is-animated") !== "true") {
        $this.attr("is-animated", "true");
        if ($('body').hasClass('home')) {
            $this.parent().stop(true, true).animate({
                top: "+=154"
            }, 400).delay(1200).fadeOut();
        } else {
            $("#int_comp").animate({
                width: "+=157"
            }, 100);
            $this.parent().stop(true, true).animate({
                top: "+=154"
            }, 400).delay(1200).fadeOut();
        }
        $("#tweet_text").delay(400).animate({
            right: "+=56"
        }, 400);
        $("#tweet").delay(900).animate({
            right: "+=214"
        }, 400);
        $("#tweet_deactivate").delay(1200).fadeIn();
        $("#tweet_text p, #tweet_text span, #tweet #links").delay(1200).fadeIn();
        $("#eye").delay(600).fadeOut(function() {
            $this.attr("is-animated", "false");
        });
    }
    return false;
});

你可以看到关键是 attr("is-animated"); 我无法在主按钮中进行检查，因为在我应用属性之前已经定义了点击事件。奇怪的。哦，好吧，如果您像我在前面的示例中所做的那样将 click 事件的内容包装在 if 语句中，它就可以工作。与前面的示例不同，但是我在此处将属性附加到锚标记并读取它以查看它是否处于动画状态。通过这种方式，您可以拥有多个具有此类事件“阻塞”的元素

于 2011-09-01T21:04:42.440 回答