JQuery - 如何退出用户定义的函数？

Question

我有一个在文档加载上运行的函数：

    function animateText() {
        $('.block')
        .css("background-image", "url(images/text-4-line-1.png)")
        .animate({left: "526"}, 1, "linear" ) .delay(2200).fadeIn(1000)
        .delay( 3000)
        .fadeOut(1000)
        $('.block2')
        .css("background-image", "url(images/text-4-line-2.png)")   
            .animate({left: "484"}, 1).delay(3200).fadeIn(1000)
         .delay( 2500)
          //etc...
    }

我想要一个按钮来阻止此功能运行并将所有元素返回到原始位置。我还希望有另一个按钮来重放动画功能。

我无法让这个工作。

任何帮助都会很棒!!

谢谢！

Answer 1

如果你的dom元素的样式不是内联的（例如style =“color：red;”），这可能就是这样......

$('#stop').click(function(){
   $('.block,.block2').stop().removeAttr('style');
});
$('#play').click(function(){
   $('.block,.block2').stop(true,true).removeAttr('style');
   animateText();
});

注意：不要使用内联样式...

I made this fun demo

Answer 2

.stop(true, true)

将停止动画并清除jQuery fx队列。

要“重播”您的动画，再次拨打animateText()功能应该没问题。

$('#yourbutton').click(animateText);

参考：.stop()

Answer 3

.stop会对您的情况有所帮助。