防止多次点击，直到动画完成（jQuery）答案

【问题标题】：Prevent multiple clicks until animation is done (jQuery)防止多次点击，直到动画完成（jQuery）
【发布时间】：2013-04-23 09:14:28
【问题描述】：

我有一个带有缩略图的画廊，当点击缩略图时，当前图像淡出，新图像淡入。

但是，我想停止多次点击，所以图像必须完全淡出才能点击新的缩略图。

如何使用下面的代码做到这一点？

非常感谢，

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

【问题讨论】：

我实际上以一种非常简单的方式做到了这一点。单击时，我将一个 div 添加到图像容器中，该容器绝对位于容器内部。当所有动画都完成后，我只需删除这一层。它实际上可以通过多种方式完成，但这样我就不必为删除/添加侦听器而烦恼。
stackoverflow.com/questions/4304883/… 的可能重复项
爱德华，你有这个例子吗，听起来很有趣。

标签： jquery

【解决方案1】：

通过添加一个布尔标志，您可以在决定做什么之前检查其状态：

// 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 效果队列的状态来进行此检查，但 IMO 使用上述本地化解决方案更简单、更清晰。

【讨论】：

我试过了，但没用，图像淡出，下一张不淡入。我使用：
@DarrenRiches：这一定是与您必须调试的代码无关的问题。提供一个我们可以在jsfiddle.com 上查看的工作示例会有所帮助。
嗨乔恩，给你：jsfiddle.net/darrenriches/696dN - 感谢你的帮助。
@DarrenRiches：呃，.append('...') 真的是一个占位符。替换为您的实际代码。 :)
天哪，我太笨了，不敢相信我没有注意到！谢谢你的帮助。太棒了！

【解决方案2】：

您可以使用:animated 选择器检查#imageWrap .next 和#imageWrap .active 是否没有动画。

$('.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      
   }
});

【讨论】：

在以下代码中出现语法错误：line: if(!$("#imageWrap .next, #imageWrap .active").is(":animated"){ 我在做一些愚蠢的事情吗?
@DarrenRiches 感谢您指出这一点，我在 if 语句中遗漏了 )。更新的代码应该可以工作
啊，是的，解决了那行的错误，但是最后一个 });现在。