Question

我目前有一个旋转木马滑块，其中包含一些文字。当用户单击“下一步”按钮时，.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/

Answer 1

在制作动画之前放置一个“.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.
                        });         
                });
    });

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

Answer 2

在动画制作之前设置“动画”标志，并在动画完成后将其清除。

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.
                        });         
                });
        });


    }

}

jquery幻灯片动画不同步

2 个答案: