Question

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

Answer 1

如果你看一下@Bram在控制台中制作的小提琴，jquery会记录一个错误

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

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

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

setInterval(Do,1500);

防止无限递归调用。

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

你也可以像这样更改fadein和fadeout链接它们。

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

Answer 2

在这里，您只需添加到事件队列，因此递归不会成为问题：

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

动画停止了

2 个答案: