0

我目前有一个包含一些文本的轮播滑块。当用户单击“下一步”按钮时，.carousel-text div 朝上隐藏文本，轮播移动到下一张幻灯片，然后下一张幻灯片上的 .carousel-text 向下滑动以显示文本。

这在某些时候效果很好，但有时会出错，文本会在轮播之前上下滑动。我假设这是因为在整个序列完成之前单击了下一个按钮（整个过程需要 2 秒）。有没有办法在再次调用之前确保整个事情是完整的？ 

jQuery("#arrow-right").click(function () {

    jQuery('.carousel-text').animate({  
         marginTop: "-260px"
         }, 500, function() {
            jQuery('.carousel-inner').animate({ 
                marginLeft: "-700px"
                }, 1000, function() {
                    jQuery('.carousel-text').animate({  
                        marginTop: "0px"
                        }, 500, function() {
                            // Animation complete.
                        });         
                });
    });
}

编辑：刚刚在这里做了一个jsfiddle：http: //jsfiddle.net/UGE44/

4

2 回答 2

0

在制作动画之前放置一个“.stop(true, true)”。这将停止以前的动画并允许新的动画同时开始。看起来像这样：

jQuery('.carousel-text').stop(true, true).animate({  
         marginTop: "-260px"
         }, 500, function() {
            jQuery('.carousel-inner').stop(true, true).animate({ 
                marginLeft: "-700px"
                }, 1000, function() {
                    jQuery('.carousel-text').stop(true, true).animate({  
                        marginTop: "0px"
                        }, 500, function() {
                            // Animation complete.
                        });         
                });
    });

您可能想玩弄您之前放置的动画，因为它可能不需要在所有三个位置。

于 2013-01-10T14:29:17.123 回答
0

在动画之前设置“动画”标志并在动画完成后清除它。

jQuery("#arrow-right").click(function () {

    var $text = jQuery('.carousel-text');

    if ($text.data('animating') !== true) {

        $text.data('animating', true)
             .animate({  
            marginTop: "-260px"
         }, 500, function() {
            jQuery('.carousel-inner').animate({ 
                marginLeft: "-700px"
                }, 1000, function() {
                    jQuery('.carousel-text').animate({  
                        marginTop: "0px"
                        }, 500, function() {
                            $text.data('animating', false);
                            // Animation complete.
                        });         
                });
        });


    }

}
于 2013-01-10T14:31:15.230 回答