Question

我有以下js函数，我想在Click事件发生后阻止任何事情发生和排队。然后，当函数结束时，允许再次发生click事件。

$("#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/

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

谢谢，马特

Answer 1

只需向元素添加一个小支票。一旦启动动画，将bool设置为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事件。奇怪。哦，如果你将click事件的内容包装在if语句中，就像我在上一个例子中所做的那样，它可以工作。与前面的示例不同，我在这里将一个属性附加到锚标记并读取它以查看它是否处于动画状态。这样，您可以使用此类事件“阻止”

来拥有多个元素

jQuery帮助unbind然后在动画序列后再次绑定

1 个答案: