Как я могу предотвратить сдвиг тумблера дважды при двойном щелчке?

У меня есть кнопка, которая вызывает переключение слайдов. Он прекрасно переключается, если кнопка нажата один раз, но если кнопка нажата дважды, слайд-переключатель выдвигается, а затем сразу же возвращается.

Как я могу сделать так, чтобы слайд был выключен даже при двойном щелчке?

Код здесь: https://codepen.io/anon/pen/Ljgqjo

Js:

$('button').on('click', function(){
    $('#one').fadeOut('slow', function(){
        $('#two').toggle('slide', {direction: 'right'}, 800, function(){
            

        });
    });
});
.container{
  width:300px;
  height:200px;
  overflow:hidden;
}
#one{
  background:blue;
   width:300px;
  height:200px;
}
#two{
  background:purple;
   width:300px;
  display:none;
  height:200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
  <div id="one">
</div>
  <div id="two">
</div>
</div>
1
Mia 29 Авг 2017 в 06:12

3 ответа

Лучший ответ

Здесь вы найдете решение 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
  <div id="one">
</div>
  <div id="two">
</div>
</div>

Вместо click используйте dblclick.

Надеюсь, что это поможет вам.

0
Shiladitya 29 Авг 2017 в 03:58

Установите флажок для отслеживания, работает ли ваша анимация. Проверьте, установлен ли он, прежде чем разрешать действие щелчка иметь какой-либо эффект. Сбросьте его, как только ваша анимация будет завершена:

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

Это дает дополнительное преимущество защиты от тройных кликов (и четверных кликов и т. Д.)

4
Pang 29 Авг 2017 в 04:57

Вы можете изменить эту строку

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

К

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

Затем он сделает то же самое для клика и двойного клика.

0
Negar Negaru 29 Авг 2017 в 03:25