Home/ Questions/Q 390995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T16:01:07+00:00

I have a toggle fade effect but when you click the button multiple times

  • 0

I have a toggle fade effect but when you click the button multiple times it fades in and out more than once. (So if i click the fade id 20 times fast it will fade in and out multiple times) How would I stop this and make it so that you can only toggle the fade when the animation was done? I tried getting the current value and making a if statement but it didn’t work :*(

Thanks

jQuery.fn.fadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};



$(document).ready(function() {
  $('.open').click(function() {
    $('#fadeMe').next().fadeToggle('slow');
  });
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to check if the element is not :animated, if so invoke the .animate:

      <body>
    <button class="open">open</button><br>
    <div id="fadeMe">fade me!</div>
    <style>#fadeMe { 
    width:20em;
    height:10em;
    background:black;
    color:#fff;
    }</style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script>
    jQuery.fn.fadeToggle = function(speed, easing, callback) {
      return this.animate({opacity: 'toggle'}, speed, easing, callback);  
    };



    $(document).ready(function() {
      $('.open').click(function() {
        var el = $('#fadeMe').next();
        if ( !el.is(':animated') ) {
            $(el).fadeToggle('slow');
        }
      });
    });
    </script>
    </body>

    Demo: http://jsbin.com/irare

    • 0