防止多次点击，直到动画完成（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的）

回答

相关问题