ユーザーのクリックを防止する

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変数isTransitioningを設定

Answer 1

-

$（ドキュメント）.ready（関数（）$（$メニュー）.click（関数（）{ で

var isTransitioning = false; 

でのすべてを包みますIF

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

は、あなたのコード

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

の開始時にこれを追加し

これは、アイテムをクリックできるかどうかの時間制限を2秒に設定します。

Answer 2

を。ユーザーがクリックするとtrueになり、アニメーションが完了するとfalseになります。ユーザーがtrueのときにクリックすると、そのクリックは無視されます。

Answer 3

:animatedセレクタを使用して、要素がまだアニメーションを終了していないかどうかを確認し、それに応じて動作します。

など。

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

別の方法としては、前のアニメーションが強制的に終了したように、任意のアニメーションメソッドを呼び出す前にstop(true, true)を使用することができます。 Kolinkが言ったことを示すために

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); 

次に、あなたがしたい他のどんなアニメーションありません。