Question

如何防止双击时切换滑动两次？

我有一个触发幻灯片切换的按钮。如果单击按钮一次，则切换正常，但如果单击按钮两次滑动切换滑出，则立即滑回。

如果双击，我怎样才能让幻灯片切换保持不变？

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>

Answer 1

设置标记以跟踪动画是否正在运行。在允许单击操作生效之前检查是否已设置。动画完成后取消设置：

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

这具有防止三次点击（以及四次点击等）的额外好处

Answer 2

您可以使用解决方案http://jsfiddle.net/nya99njz/2/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

而不是click使用dblclick。

希望这会对你有所帮助。

Answer 3

您可以更改此行

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

要

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

然后它会对点击和双击做同样的事情。

双击时，jQuery幻灯片切换两次触发

3 个答案: