防止多次點擊，直到動畫完成（jQuery的）

我有縮略圖畫廊和被點擊縮略圖時，當前圖像淡出，並在新的圖像變淡。防止多次點擊，直到動畫完成（jQuery的）

不過，我想停下來多次點擊，因此圖像必須在能夠點擊新的縮略圖之前完全淡出。

我該如何用下面的代碼來做到這一點？

非常感謝，

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>TEST</title> 
<script type='text/javascript' src='jquery-1.9.1.js'></script> 

<style type='text/css'> 
#imageWrap{ 
position:relative; 
overflow:hidden; 
height:534px; 
width:800px; 
} 
.next{ 
display:none; 
} 
#imageWrap img{ 
width: 800px; 
position: absolute; 
top: 0; 
left: 0; 
background-color: #000; 
} 
</style> 

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$('.thumbnail').on('click',function(){ 
$('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />'); 
$('#imageWrap .active').fadeOut(5500); 
$('#imageWrap .next').fadeIn(4000, function(){ 
    $('#imageWrap .active').remove(); 
    $(this).addClass('active'); 
}); 

}); 
});//]]> 

</script> 

</head> 
<body> 
<img src="dimming/1.jpg" class="thumbnail" alt="A" width="40" height="40"/> 
<img src="dimming/2.jpg" class="thumbnail" alt="B" width="40" height="40"/> 
<img src="dimming/C.jpg" class="thumbnail" alt="C" width="40" height="40"/> 
<img src="dimming/D.jpg" class="thumbnail"alt="D" width="40" height="40"/> 
<img src="dimming/E.jpg" class="thumbnail" alt="E" width="40" height="40"/> 

<div id="imageWrap"> 
    <img src="dimming/C.jpg" alt="Main Image" width="800" height="534" class="active" /> 
</div> 
</body> 
</html>

來源

2013-04-23 Darren Riches

我其實很簡單地做到這一點。點擊我添加一個div到圖像容器，它完全位於容器內。當所有的動畫完成後，我只是刪除這一層。實際上，它可以通過多種方式完成，但這種方式我不必費心去除/添加偵聽器。 – 2013-04-23 09:24:01

可能重複http://stackoverflow.com/questions/4304883/disable-until-animation-complete – 2013-04-23 09:26:27

愛德華，你有這樣的例子，聽起來很有趣。 – 2013-04-23 09:38:16

通過增加一個布爾標誌，其狀態可以決定做什麼之前檢查：

// Are we in the middle of an animation? 
var currentlyAnimating = false; 

$('.thumbnail').on('click',function(){ 
    if (currentlyAnimating) { 
     return; 
    } 

    currentlyAnimating = true; 

    $('#imageWrap').append('...'); 
    $('#imageWrap .active').fadeOut(5500); 
    $('#imageWrap .next').fadeIn(4000, function(){ 
     $('#imageWrap .active').remove(); 
     $(this).addClass('active'); 
     currentlyAnimating = false; 
    }); 
});

當然，你也可以通過查詢DOM的狀態或jQuery的效果隊列使此檢查有問題的元素，但海事組織使用上述本地化解決方案更簡單，更清潔。

來源

2013-04-23 09:19:11 Jon

我試過這個，但它沒有起作用，圖像淡出，下一個不褪色。我使用過： – 2013-04-23 09:26:32

@DarrenRiches：這必須是與您必須調試的代碼無關的問題。提供一個可以在http://jsfiddle.com上查看的工作示例會有所幫助。 – Jon 2013-04-23 09:33:03

嗨喬恩，在這裏你去：http://jsfiddle.net/darrenriches/696dN/ - 欣賞你的幫助。 – 2013-04-23 09:37:24

您可以檢查#imageWrap .next和#imageWrap .active不使用:animated選擇動畫。

$('.thumbnail').on('click',function(){ 
    if(!$("#imageWrap .next, #imageWrap .active").is(":animated")){ 
     $('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />'); 
     $('#imageWrap .active').fadeOut(5500); 
     $('#imageWrap .next').fadeIn(4000, function(){ 
      $('#imageWrap .active').remove(); 
      $(this).addClass('active'); 
     });//this was missing  
    } 
});

來源

2013-04-23 09:17:44

這是一個語法錯誤：line：if（！$（「＃imageWrap .next，#imageWrap .active」）。is（「：animated」）{我在做一些愚蠢的事情嗎？ – 2013-04-23 09:28:31

@DarrenRiches感謝您指點那個，我在if語句中錯過了''''。更新後的代碼應該可以工作 – 2013-04-23 09:30:27

啊，是的，這就解決了那一行上的錯誤，但是最後}}中的語法錯誤;現在。 – 2013-04-23 09:33:20

防止多次點擊，直到動畫完成（jQuery的）

回答

相關問題