快速单击相关点时如何防止其他div淡入淡出？

Question

单击 div 下面的点时，我在 div 之间转换时遇到问题。当我等待动画完成时一切正常，但是当我设置较慢的持续时间并快速单击点时，两个 div 同时淡入。如何预防？ jQuery:

function main() {
var $currentSlide = $("#slide_1");
var $prevDot = $(".current");
$('.dot').on('click',function() {

    var index = $(this).index() + 1;
    $prevDot.removeClass('current');
    $(this).addClass('current');
    $prevDot = $(this);
    $currentSlide.fadeOut(2000,function() {   
        $('#slide_'+index).fadeIn(2000);            
    });
    $currentSlide = $('#slide_'+index);

});

}

$(document).ready(main);

HTML:

<div id="wrapper">
<div id="content_wrap">
    <div id="slide_1"></div>
    <div id="slide_2"></div>
    <div id="slide_3"></div>
</div>
<div id="dots">
    <div class="dot current" id="first"></div>
    <div class="dot" id="second"></div>
    <div class="dot" id="third"></div>
</div>
<div id="text"></div>
</div>

Fiddle: https://jsfiddle.net/krz099/6advvq6g/

Answer 1

需要在定时动画里面设置"current slide"，点击停止上一个动画。否则在动画期间，当前幻灯片仍然是第一次点击时的上一张幻灯片，无论是否有新的点击。

$currentSlide.stop().fadeOut(2000,function() {   
            $('#slide_'+index).fadeIn(2000); 
            $currentSlide = $('#slide_'+index);

        });

JSFIDDLE: https://jsfiddle.net/ycLdvdzj/1/

快速单击相关点时如何防止其他div淡入淡出？

How to prevent fading in other divs when quickly clicking related dots?

jquery

fadein