Question

我有一个简单的功能，通过交叉渐变来动画一堆图像。一个简单的横幅旋转。我设置了这个函数，以便调用animateSlideshow("play")它应该设置超时并开始设置动画，并且通过调用animateSlideshow("stop")它应该停止。

然而，当我呼叫停止时，动画再次出现。这个额外动画的原因是什么？我该如何处理？

这会调用底部的函数

function prevSlide(e){

    if(curHashIndex !== 0){

        $(prevBtn).off();

        // Stop the current slideshow
        animateSlideshow("stop");

        // Reset the current slideshow
        $("li.active .rightSlide > li").fadeOut(600).eq(0).fadeIn(600).addClass("actvImg");

        $(".rightSlides").animate({
            "left" : '+=345'
        }, 600, function(){
            $(prevBtn).on('click', prevSlide);
        });

        $(".leftSlides").animate({
            "left" : '+=417'
        }, 600);

        // Activate the new slide
        $(".rightSlides li.active").removeClass("active").prev().addClass("active");
        activeSlide = $(".rightSlides li.active");
        total = $(".rightSlides li.active .rightSlide > li").length;

        // Start slideshow on the new slide
        var delay = setTimeout(animateSlideshow("play"), 10000);

        updateHash();
    }

}





function animateSlideshow(action){

    if(action === "play"){
        $(activeSlide).data('animateSlideshow', 
            setTimeout(function(){

                if( $(actvImg).index() === total - 1 ){
                    $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").siblings().eq(0).fadeIn(animationSpeed).addClass("actvImg");
                }else{
                    $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").next().fadeIn(animationSpeed).addClass("actvImg");
                }

                actvImg = $(".rightSlides li.active .rightSlide > li.actvImg");
                actvImgIndx = $(actvImg).index();
                updateBreadcrumbs();
                animateSlideshow("play")

            }, animationTimeout)
        );
    }else{
        clearTimeout($(activeSlide).data('animateSlideshow'));
    };

};

Answer 1

您应该使用setInterval（）/ clearInterval（）而不是使用setTimeout（）调用该函数。

function animateSlideshow(action){

if(action === "play"){
    $(activeSlide).data('animateSlideshow', 
        setInterval(function(){

            if( $(actvImg).index() === total - 1 ){
                $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").siblings().eq(0).fadeIn(animationSpeed).addClass("actvImg");
            }else{
                $(actvImg).fadeOut(animationSpeed).removeClass("actvImg").next().fadeIn(animationSpeed).addClass("actvImg");
            }

            actvImg = $(".rightSlides li.active .rightSlide > li.actvImg");
            actvImgIndx = $(actvImg).index();
            updateBreadcrumbs();

        }, animationTimeout);
    );
}else{
    clearInterval($(activeSlide).data('animateSlideshow'));
};

};

Answer 2

我不确定为什么它会失败，但我尝试了类似的演示，它对我有用..

DEMO 此处

此外，我使用.stop()来停止当前动画。如果要停止该对象上的当前动画，可以使用它。

jQuery setTimeout问题

2 个答案: