jquery - 如何使我的 jQuery 幻灯片控件牢不可破？

Question

我正在使用 jQuery 构建一个简单的幻灯片。我已经掌握了基础知识，但作为一个相对的 jQuery 新手，我觉得我正在与动画队列作斗争，并且没有取得太大进展。

我通过创建一个接收要显示的第一张幻灯片的数字索引的函数来创建幻灯片。它淡入幻灯片，暂停，淡出幻灯片，然后调用自身，传递下一张幻灯片的数字索引。这一切都很完美。

当我尝试允许用户交互时会出现问题。我创建了一个按钮，允许用户在特定幻灯片上开始幻灯片放映。此按钮清除队列，然后淡出当前幻灯片，然后启动幻灯片放映功能，传入要开始的特定幻灯片的索引。这也很有效。当快速单击按钮多次时，问题就会开始发生。奇怪的事情开始发生，比如预期的幻灯片会淡入，但只淡入一半，或者它后面的幻灯片连续淡入几次。

我尝试过在半随机的地方抛出“stop()”和“clearQueue()”，但到目前为止我运气不佳。对于那些牢牢掌握动画队列如何工作的人来说，这是(希望)一个简单的修复 - 不幸的是，这个人还不是我。

这是代码的核心。要查看问题的实时超简化版本，请参阅:http://martinsmucker.com/demo/slideshow.html

HTML:

<div id="slideshow_container">
    <div class="slide" id="slide1"></div>
    <div class="slide" id="slide2"></div>
    <div class="slide" id="slide3"></div>
    <div class="slide" id="slide4"></div>
</div>
<button>Purple</button>

jQuery:

runSlideShow(1);

$('button').click(function(){
    $('.slide:visible').clearQueue().fadeOut(500, function(){
        runSlideShow(3);
    });
});

function runSlideShow (slideNumber)
{
    $('#slide' + slideNumber).fadeIn(500).delay(3000).fadeOut(500, function() {
        // if we're on the last slide (number 4), start over at number 1
        if (slideNumber == 4) {
            runSlideShow(1);
        }
        // otherwise, just move to the next slide
        else {
            slideNumber++;
            runSlideShow(slideNumber);
        }
    });
}

非常感谢任何帮助，谢谢!

Answer 1

不要使用 .clearQueue()，而是使用 .stop(true,true) ( ref )

这是一个updated demo .