CODEWITHSUNDEEP
javascriptjqueryhtml
Super Hornet
Super Hornet

Reputation: 2907

animation stopped after while

I just wrote below code. after clicking the button the 3 containers should start to flash infinitely but the flashing stops after while. I have not figured out why. Any idea? 

<!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

Upvotes: 0

Views: 54

Answers (2)

juanrpozo
juanrpozo

Reputation: 697

Here you would simply add to the event queue so recursion doesn't become a problem:

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

Upvotes: 0

Eduardo Quintana
Eduardo Quintana

Reputation: 2388

If you look at the fiddle @Bram made in the console jquery logs an error

Uncaught RangeError: Maximum call stack size exceeded

Maybe you will need to change the way your animation works, or maybe do the animation with css.

Look at this fiddle I added a

setInterval(Do,1500);

To prevent infinite recursive calls.

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

Also you can change the fadein and fadeout chaining them like this.

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

Upvotes: 5

Related Questions