Question

我有一个功能，可以在点击时在我的导航中显示div，并且您可以切换它，因此当您再次按下它时它会隐藏。

问题是，你可以垃圾邮件点击它，这样动画就会继续运行并打破div。

我需要的是某种反垃圾邮件点击，我希望它等到第一个动画完成后。

以下是代码：

$("#navDown").click(function(){
if($("#navExpand").height()===0){
    $('#navArrow').animateRotate(0, -180);
    $("#navExpand").animate({
        height: 150
    })
    $(".navExCon").delay(300).fadeToggle(150);
    }
else if($("#navExpand").height()===150)
    {
$(".navExCon").fadeToggle(150);
    $('#navArrow').animateRotate(180, 0);
    $("#navExpand").delay(300).animate({
        height: 0
    });
    };

}）;

更新/解决方案

这就是我所做的：注意：在这个网站上使用颜色会更好看看变化。

$("#navDown").click("slow",function(){ // added time "slow": 600 u i think.
  if($("#navExpand").height()===0){
    $('#navArrow').animateRotate(0, -180);
    $("#navExpand").animate({
        height: 150
    },200)                    // added some time
    $(".navExCon").fadeToggle(100);
    }
    else if($("#navExpand").height()===150)
    {
    $(".navExCon").fadeToggle(250);
    $('#navArrow').animateRotate(180, 0);
    $("#navExpand").animate({
        height: 0
    },200);                  // added some time
    };
});

Answer 1

动画结束后，你可以拥有一个回调函数：

var animating = false;
$("#navDown").click(function(){
    if (animating) {
        return; // Don't start new animation
    }
    animating = true;

    if($("#navExpand").height()===0){
        $('#navArrow').animateRotate(0, -180);
        $("#navExpand").animate({
            height: 150
        })
        $(".navExCon").delay(300).fadeToggle(150, function() {
            // Will be called after animation is finished
            animating = false;
        });
    }
    else if($("#navExpand").height()===150)
    {
        $(".navExCon").fadeToggle(150);
        $('#navArrow').animateRotate(180, 0);
        $("#navExpand").delay(300).animate({
            height: 0
        }, function() {
            // Will be called after animation is finished
            animating = false;
        });
    }
});

jQuery：我的函数需要反垃圾邮件

1 个答案: