jQuery同一時間的一個事件

我正在使用fadeOut和fadeIn通過change（）事件。問題是你可以快速選擇兩個選項，並最終同時發生兩個事件。我如何做到這一點，所以只有1個事件發生，當該事件完成後，如果用戶選擇該選項，允許發生第二個事件？jQuery同一時間的一個事件

這裏是我的代碼：

<!DOCTYPE HTML> 
<html> 
<head> 
    <style type="text/css"> 
    /*<![CDATA[*/ 
    .box1{ 
    width: 200px; 
    height: 200px; 
    border: 5px solid #000; 
    } 
    .box2{ 
    width: 200px; 
    height: 200px; 
    border: 5px solid #0f0; 
    display: none; 
    } 
    /*]]>*/ 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script language="JavaScript" type="text/javascript"> 
    /*<![CDATA[*/ 

      $(document).on('change', 'input[name=all]', function(){ 

      var which = $(this).attr('id'); 
      if (which =='b'){ 
       $('.box1').fadeOut(function(){ $('.box2').fadeIn(); }); 
      } 
      else 
      { 
      //$('.check_box_holder_for_playlist_items').show(); 
       $('.box2').fadeOut(function(){ $('.box1').fadeIn(); }); 
      } 

      }); 
    /*]]>*/ 
    </script> 
</head> 
<body> 
<form name="test" action="http://"> 
<label><input type="radio" name="all" value="1" id="a" checked="checked" /> Show box 1</label><br /> 
<label><input type="radio" name="all" value="2" id="b" /> Show box 2</label><br /> 
</form> 
<div class="box1"> first box </div> 
<div class="box2"> second box </div> 
</body> 
</html>

來源

2014-02-06 simianIII

添加停止腳本

Here is a working Fiddle

 $(document).on('change', 'input[name=all]', function(){ 

     var which = $(this).attr('id'); 
     if (which =='b'){ 
      $('.box1').stop().fadeOut(function(){ $('.box2').stop().fadeIn(); }); 
     } 
     else 
     { 
     //$('.check_box_holder_for_playlist_items').show(); 
      $('.box2').stop().fadeOut(function(){ $('.box1').stop().fadeIn(); }); 
     } 

     });

這裏我用一個.fadeToggle();

JSFiddle

 $(document).on('change', 'input[name=all]', function(){ 

     $('.toggle').stop().fadeToggle(500); 

     });

來源

2014-02-06 20:37:01 VIDesignz

好的，這樣做，它幾乎在那裏。現在，如果你快速點擊兩個選項，它將停在中間位置，並具有一定的透明度。是否有一個函數可以允許當前事件完成，但在第一個事件結束之前不能開始下一個事件？ – simianIII

@simianIII截至目前，如果你打第一個，然後打第二個，它停止第一個，並開始第二個。這不是你想要的嗎？您不能以兩種方式使用它，要麼您要完成動畫，要麼停止並開始其他動畫。如果你想在下一個開始之前完成，你最終會像原來一樣累積動畫。 – VIDesignz

您可以隨時在盒子上聲明絕對位置並切換可見性。 – VIDesignz

jQuery同一時間的一個事件

回答

相關問題