CODEWITHSUNDEEP
jquery
simianIII
simianIII

Reputation: 45

jQuery one event at a time

I am using fadeOut and fadeIn through change() event. Problem is you can chose both options quickly and end up with both event occuring at the same time. How do I make it so only 1 event occurs and when that event is finished then the second event is allowed to happen should user select the option?

Here is my code:

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

Upvotes: 1

Views: 47

Answers (1)

VIDesignz
VIDesignz

Reputation: 4783

Add a stop in the script

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

       });

Here I use a .fadeToggle();

JSFiddle

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

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

      });

Upvotes: 1

Related Questions