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>

小提琴：https://jsfiddle.net/krz099/6advvq6g/

Answer 1

您需要在定时动画中设置“当前幻灯片”，并在点击时停止上一个动画。否则，在动画期间，当前幻灯片仍然是第一次单击时的前一张幻灯片，无论新单击如何。

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

        });

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

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

1 个答案: