2014-02-28 179 views
0

我只寫了下面的代碼。點擊按鈕後,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

+2

奇怪的行爲確實如此。爲那些想玩它的人準備的小提琴。 http://jsfiddle.net/Q9rKc/ –

+0

它引發一個Uncaught RangeError:最大調用堆棧大小超過 –

+1

你可以嘗試調用函數Do()與每個.container像這樣[http://jsfiddle.net/Q9rKc/2 /](http://jsfiddle.net/Q9rKc/2/) –

回答

5

如果你看一下在控制檯的jQuery做小提琴@Bram記錄一個錯誤

未捕獲的RangeError:最大調用堆棧大小超過

也許你會需要改變你的動畫的工作方式,或者用css做動畫。

看看這個小提琴我添加了一個

setInterval(Do,1500); 

爲了防止無限遞歸調用。

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

你也可以改變淡入淡出和鏈接他們這樣。

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

在這裏,您將只需添加到事件隊列所以遞歸不會成爲一個問題:

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