Question

我有一个基于菜单选项显示内容的功能，每次用户点击不同选项时，当前活动内容将淡出，并且将显示点击内容（确定选项中的每个div将按顺序显示），我的问题是如何阻止用户快速点击，例如，如果他决定在最后一个部分结束之前点击其他部分，则会使动画搞乱，这是我的代码。

$(document).ready(function() {
    $("#Default .box").fadeIn(); 
    var $aBox = 0;
    var $menu = "#inner_menu li";
    var $myliID = 0;
    var $myBox = "#Digital_Box .box";
    var $myActiveBox = 0;
    var $myHeight = 0;

    $($menu).click(function() {
        var delay = 0;
        $myliID = $(this).attr("id");
        $myBox = "#" + $myliID + "_Box .box";
          if ($aBox == 1) {
             if ($myActiveBox != $myBox) {
                $($myActiveBox).fadeOut(300);
             }
        $($myBox).delay(300).each(function() 
            {
                $(this).delay(delay).fadeIn(300);
                delay += 500;
              });
            $aBox = 1;
            $myActiveBox = $myBox;
        }
        else
         {
            $("#Default_Box .box").fadeOut(300); 
            $($myBox).delay(300).each(function() 
                {
                    $(this).delay(delay).fadeIn(300);
                    delay += 500;
                });
            $aBox = 1;
            $myActiveBox = $myBox;
        }
        });
});

正如你所看到我匹配li元素并且它通过他们的ID确定内容，一切正常但问题是快速点击而不让其他动画完成。

抱歉，如果我的编码很糟糕，我正在尝试开始编写自己的“插件”：P

Answer 1

向您展示Kolink所说的话 -

在$（文件）.ready（function（）

中

   var isTransitioning = false;

在$（$ menu）.click（function（）{ 将所有内容包装在IF

中

   if (isTransitioning == true) {
         // do nothing
   } else {
         // your code
   }

然后在代码开头添加此内容

   isTransitioning = true;
   setTimeout(function() {
     isTransitioning = false;
   }, 2000);

设置点击项目之间的时间限制为2秒

Answer 2

设置变量isTransitioning。用户点击时设为true，动画完成后设为false。如果用户点击true时，请忽略该点击。

Answer 3

使用:animated选择器检查元素是否尚未完成动画并采取相应措施。

E.g。

if(!$(element).is(':animated')){
     //element has finished animation
}

或者，您可以在调用任何动画方法之前使用stop(true, true)，以便强行完成上一个动画。

Answer 4

试着试一试。它应该在菜单项的父项（我假设的UL元素）上设置一个标志，这样后续点击任何菜单项都不会做任何事情，直到前一个完成动画。

$(document).ready(function() {
    $("#Default .box").fadeIn(); 
    var $aBox = 0;
    var $menu = "#inner_menu li";
    var $myliID = 0;
    var $myBox = "#Digital_Box .box";
    var $myActiveBox = 0;
    var $myHeight = 0;

    $($menu).click(function(e) {
        if( $(this).parent().data('animating') ) {
            //already animating
            e.preventDefault(); //stop default click action
            e.stopImmediatePropagation(); //stop click event bubbling
            return; //prevent the animaton from firing below this line
        }
        $(this).parent().data('animating',true);
        var delay = 0;
        $myliID = $(this).attr("id");
        $myBox = "#" + $myliID + "_Box .box";
          if ($aBox == 1) {
             if ($myActiveBox != $myBox) {
                $($myActiveBox).fadeOut(300);
             }
        $($myBox).delay(300).each(function() 
            {
                if( $($myBox).last()[0] == this ) {
                    //this should cause the last animated item to callback and remove the animating flag from the parent (UL item for the menu list)
                    $(this).delay(delay).fadeIn(300,function(){
                        $(this).parent().data('animating',false);
                    });
                } else {
                    $(this).delay(delay).fadeIn(300);
                }
                delay += 500;
              });
            $aBox = 1;
            $myActiveBox = $myBox;
        }
        else
         {
            $("#Default_Box .box").fadeOut(300); 
            $($myBox).delay(300).each(function() 
                {
                    if( $($myBox).last()[0] == this ) {
                        //this should cause the last animated item to callback and remove the animating flag from the parent (UL item for the menu list)
                        $(this).delay(delay).fadeIn(300,function(){
                            $(this).parent().data('animating',false);
                        });
                    } else {
                        $(this).delay(delay).fadeIn(300);
                    }
                    delay += 500;
                });
            $aBox = 1;
            $myActiveBox = $myBox;
        }
        });
});

Answer 5

使用以下命令杀死菜单元素上的当前动画：

$("#inner_menu li").stop(true, true);

然后做你想做的其他动画。

阻止用户点击

5 个答案: