Javascript 动画在一段时间后停止_Javascript_Jquery_Html

Javascript 动画在一段时间后停止

javascript jquery html

Javascript 动画在一段时间后停止,javascript,jquery,html,Javascript,Jquery,Html,我只是写了下面的代码。单击按钮后，3个容器应开始无限闪烁，但闪烁会在一段时间后停止。我还不明白为什么。有什么想法吗 <!DOCTYPE html> <html> <head> <title></title> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){

我只是写了下面的代码。单击按钮后，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>


$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
Do（）；
})
});
函数Do（）{
$（“.container”）.fadeOut（“慢”，函数（）{
$（this.fadeIn（“slow”，function（）{Do（）；}）；
});
}
.集装箱{
背景：黄色；
宽度：200px；
高度：50px；
字体大小：20px；
}
推我
你好
你好
你好

如果查看控制台中的fiddle@Bram，jquery会记录一个错误

未捕获范围错误：超过最大调用堆栈大小

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

看这把小提琴，我加了一把

setInterval(Do,1500);

防止无限递归调用

也可以像这样更改淡入淡出和淡出链接

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