在动画完成之前防止多次点击（jQuery）(Prevent multiple clicks until animation is done (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>I have a gallery with thumbnails and when the thumbnails are clicked the current image fades out and the new image fades in.
However, I want to stop multiple clicks, so the image has to fade out completely before being able to click a new thumbnail.
How can I do this with the code below?
Many thanks,
<!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>最满意答案
通过添加一个布尔标志，您可以在决定做什么之前检查其状态：
// 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使用如上所述的本地化解决方案更简单，更清晰。
By adding a boolean flag whose status you can check before deciding what to do:
// 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; }); });Of course you can also make this check by querying the status of the DOM or jQuery's effects queue for the elements in question, but IMO it is much simpler and cleaner with a localized solution like the above.
更多推荐
发布评论