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。

Answer 2

我过去处理此问题的一种方法是使用跟踪变量来指示动画何时执行（例如'isAnimating'）。在单击侦听器中，我首先检查isAnimating = true。如果是这样，请跳过它。否则，设置isAnimating = true并执行动画。在动画的回调中，我将isAnimating重置为false。

Answer 3

禁用按钮，直到动画完成然后重新启用？

如果这是一个更大的项目，那么使用一个好的滚动插件可能是一个想法（虽然为自己制作一个很好）。

查看我今晚刚刚在JQuery Scrollable页面上实施的this（等待几秒钟以便加载，或者用箭头查看右下角的历史记录部分。< / p>

热门滚动条代码

$('.section_2').scrollable({circular: true, mousewheel: true, speed: 1000}).autoscroll({
    interval: 5000      
});
var api = $(".section_2").data("scrollable");
// do something upon scroll
api.onSeek(function() {
    //console.info("current position is: " + this.getIndex())
});

底部滚动条代码

$('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"});
var api_timeline = $(".timeline-container").data("scrollable");
//console.info(api_timeline.getSize());
var timeline_random_index = Math.floor( Math.random() * ( api_timeline.getSize()+1) )+1;
//console.info(timeline_random_index);
api_timeline.seekTo( timeline_random_index, 0 );

如何使用控件牢不可破地制作我的jQuery幻灯片？

3 个答案: