动画停止后，而

我只写了下面的代码。点击按钮后，3个容器应该开始无限闪烁，但闪烁在一段时间后停止。我还没有弄清楚为什么。任何想法？动画停止后，而

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 


<script src="js/jquery-1.10.2.min.js"></script> 

<script> 
    $(document).ready(function(){ 
     $("#btn").click(function(){ 
      Do(); 
     }) 
    }); 
    function Do(){ 


     $(".container").fadeOut("slow",function(){ 
      $(this).fadeIn("slow",function(){Do();}); 
     }); 
    } 
</script> 
<style type="text/css"> 
    .container{ 
     background: yellow; 
     width: 200px; 
     height: 50px; 
     font-size: 20px; 
    } 
</style> 

</head> 
<body> 
<button type="button" id="btn">Push Me</button> 
<div id="container" class="container"> 
    Hello 
</div> 
<div id="container2" class="container"> 
    Hello 
</div> 
<div id="container3" class="container"> 
    Hello 
</div> 

</body> 
</html>

jsfiddle

来源

2014-02-28 Mahdi Jalilvand

奇怪的行为确实如此。为那些想玩它的人准备的小提琴。 http://jsfiddle.net/Q9rKc/ –

它引发一个Uncaught RangeError：最大调用堆栈大小超过 –

你可以尝试调用函数Do（）与每个.container像这样[http://jsfiddle.net/Q9rKc/2 /](http://jsfiddle.net/Q9rKc/2/） –

如果你看一下在控制台的jQuery做小提琴@Bram记录一个错误

未捕获的RangeError：最大调用堆栈大小超过

也许你会需要改变你的动画的工作方式，或者用css做动画。

看看这个小提琴我添加了一个

setInterval(Do,1500);

为了防止无限递归调用。

http://jsfiddle.net/eddiarnoldo/Q9rKc/1/

你也可以改变淡入淡出和链接他们这样。

$(".container").fadeOut(1000).fadeIn(1000);

来源

2014-02-28 20:25:27

在这里，您将只需添加到事件队列所以递归不会成为一个问题：

$(document).ready(function() { 
    $("#btn").click(function() { 
     $(".container").fadeOut("slow").fadeIn("slow", function() { 
      $("#btn").trigger("click"); 
     }); 
    }); 
});

来源

2014-02-28 21:07:41 juanrpozo

动画停止后，而

回答

相关问题