jQuery滑動切換觸發兩次雙擊

我有一個按鈕，觸發滑動切換。如果按鈕被點擊一次，則切換正常，但如果按鈕被點擊兩次，則滑動切換滑出並立即滑回。

即使雙擊，我如何獲得滑動切換？

代碼在這裏：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>

來源

2017-08-29 Mia

在這裏，你去了一個解決方案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。

希望這會幫助你。

來源

2017-08-29 03:19:46 Shiladitya

我需要它在單擊和雙擊上工作，只能雙擊。 – Mia

你能否詳細說明你的問題？ – Shiladitya

當然，因爲它現在是切換滑出，然後立即雙擊回來。我需要紫色留在點擊和雙擊，它不應該滑回，除非按鈕被點擊。 – Mia

設置一個標誌來跟蹤您的動畫是否正在運行。在允許點擊操作產生任何效果之前檢查它是否已設置。取消它一旦你的動畫完成：

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

這對於保護對三聯點擊的額外好處（和四擊，等...）

來源

2017-08-29 03:22:58 McHat

您可以更改此行

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

要

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

然後它會做點擊和雙擊同樣的事情。

來源

2017-08-29 03:25:42

jQuery滑動切換觸發兩次雙擊

回答

相關問題