Jquery Slide Toggle Fires Twice On Double Click

How can I prevent toggle from sliding twice on double click? I have a button that triggers a slide toggle. It toggles fine if the button is clicked once but if the button is click

Solution 1:

Set a flag for tracking whether your animation is running. Check if it is set before allowing the click action to have any effect. Unset it once your animation is done:

var animating = false;
$('button').on('click', function(){
    if(!animating){
        animating = true;
        $('#one').fadeOut('slow', function(){
            $('#two').toggle('slide', {direction: 'right'}, 800, function(){
                animating = false;
            });
        });
    }
});

This has the additional benefit of protecting against triple clicks (and quadruple clicks, etc...)

Solution 2:

Here you go with a solution http://jsfiddle.net/nya99njz/2/

var sliding = false;
$('button').on('click dblclick', function(){
  if(!sliding){
    sliding = true;
    $('#one').fadeOut('slow', function(){
      $('#two').toggle('slide', {direction: 'right'}, 800, function(){
        sliding = false;
      });
    });
  }
});

.container{
  width:300px;
  height:200px;
  overflow:hidden;
}
#one{
  background:blue;
   width:300px;
  height:200px;
}
#two{
  background:purple;
   width:300px;
  display:none;
  height:200px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><button>Click me to slide</button><divclass="container"><divid="one"></div><divid="two"></div></div>

Instead of click use dblclick.

Hope this will help you.

Solution 3:

You can change this line

$('button').on('click', function(){

To

$('button').on('click dblclick', function(){

Then it will do the same thing for click and double click.