Question

所以我正在从头开始用幻灯片导航构建这个模态/定时动画。

我有一个用于导航幻灯片的按钮的功能，还有一个每隔5秒为帧设置动画的功能。我的问题是，如果用户决定通过单击导航按钮接管，我不确定如何“中断”延迟功能。一旦用户点击任何这些按钮，基于延迟的动画功能就需要停止工作。

    // Timer for Animating Frames
    // Need a kill timer function
    var animateFramesTimer = function(){

        $('#tour_1')
            .delay(5000).fadeOut('fast', function() {

        $('#tour_2')
            .fadeIn('fade').delay(5000).fadeOut('fast', function() {

        $('#tour_3')
            .fadeIn('fade').delay(5000).fadeOut('fast', function() {

        $('#tour_4')
            .fadeIn('fade').delay(5000).fadeOut('fast', function() {
                        $('#tour_modal').fadeOut('fast');
                        // END
                    });
                });
            });
        });

    }

    animateFramesTimer();

所以我运行animateFramesTimer并且如果单击某个按钮我需要该函数停止工作，我尝试了一个while循环，这似乎是正确的路径，但它在浏览器中一直打破：（< / p>

var autoAnimate = true;

while(autoAnimate){
    // delay animation
}

你知道更好的方法吗？

Answer 1

$('[id^="tour_"]').stop(true, true); // kills current animations
animateFramesTimer = function() {};  // removes function

如何停止基于jQuery延迟计时器的动画？

1 个答案: