停止jQuery的動畫執行多次，當點擊

Question

我想創建一個能夠消失後點擊它的元素。代碼顯然可以工作，但是，如果您嘗試多次單擊div，則會看到動畫重新啓動並執行多次。

有沒有辦法讓它只播放一次，即使對它應用了多次點擊？

下面是我得到了什麼：

$(document).ready(
 
    function() { 
 
    $('#movingDiv').click(function() { 
 
     $(this).hide('slide', { 
 
     direction: 'right' 
 
     }, 1000); 
 
    }); 
 
    });

#movingDiv { 
 
    width: 50%; 
 
    height: 3em; 
 
    border: 3px solid red; 
 
    color: #000; 
 
    background-color: orange; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script> 
 
<div id="movingDiv">Some content.</div>

Answer 1

使用 '解除綁定'，以消除第一次點擊的點擊處理程序。

$(document).ready(
 
    function() { 
 
    $('#movingDiv').click(function() { 
 
     $(this).unbind('click').hide('slide', { 
 
     direction: 'right' 
 
     }, 1000); 
 
    }); 
 
    });

#movingDiv { 
 
    width: 50%; 
 
    height: 3em; 
 
    border: 3px solid red; 
 
    color: #000; 
 
    background-color: orange; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script> 
 
<div id="movingDiv">Some content.</div>

Answer 2

需要清除每次點擊動畫隊列，而不是疊加起來的動畫。您可以使用stop()來實現這一目標：

$(document).ready(function(){ 
    $('#movingDiv').click(function() { 
     $(this).stop().hide('slide', { direction: 'right' }, 1000); 
    }); 
}); 

Working example

這使得當你點擊它

這是真實的動畫暫時停止。這是由於元素動畫的緩動效應。一種可能的解決方法是隻允許單擊該元素來隱藏它。

$('#movingDiv').one('click', function() { 
    $(this).hide('slide', { direction: 'right' }, 1000); 
}); 

Working example