Question

我正在通过change（）事件使用fadeOut和fadeIn。问题是你可以快速选择这两个选项并最终同时发生这两个事件。如何才能使它只发生1个事件，当该事件结束时，如果用户选择该选项，则允许第二个事件发生？

这是我的代码：

<!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>

Answer 1

在脚本中添加一个停止

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

      });

jQuery一次一个事件

1 个答案: