卡在Jquery动画无限循环中

Question

I am trying create bubbles, after few repetitions my browser getting stuck. here is my code. someone please help.... How do I get it done with out making many requests .

It looks like my post is mostly code , but I added enough details for this Stackoverflow :)

Thanks!

Jquery:

    $(document).ready(function() {

                           function bubbles()
                       {


                       var i = 0;


                      $(".circle").remove();



                       for(i = 0; i < 3; i ++ )

                       {

                             var CreateDiv =   document.createElement('div');

                      var AppendElem =  document.body.appendChild(CreateDiv);

                      AppendElem.setAttribute('class','circle');

                      CreateDiv.style.position = "absolute";

                      var randomPosTop = Math.floor((Math.random() * 800) + 1);

                      CreateDiv.style.top = randomPosTop +"px";

                       var randomPosLeft = Math.floor((Math.random() * 1200) + 1);

                       CreateDiv.style.left = randomPosLeft +"px";

                        }

                        $( ".circle" ).animate({ opacity :0.0,height:100, width:100 }, 5000,bubbles);


                       }

                       bubbles();


                       });

CSS

        .circle{ width: 20px;
                 height: 20px;
                 background-color: #000;
                 border-radius: 100px; position:absolute;}

jsfiddle

     https://jsfiddle.net/krishnakamal549/u4krxq8o/

Answer 1

The issue is that the callback in the animation gets called for each element it finds. So.. the first time it gets called 3 times, the second time 9, the third time 18, it gets tripled each time, eventually you're running hundreds of instances of "bubbles".

You want to use a promise to do the callback like so.

   $(".circle").animate({
     opacity: 0.0,
     height: 100,
     width: 100
   }, 5000).promise().done(bubbles);

This way, the callback only fires once for the entire animation, not per element.

FIDDLE

Answer 2

$(".circle").animate({
   opacity: 0.0,
   height: 100,
   width: 100
}, 5000);

$("body").animate({ opacity: 1 }, 5000, bubbles);

Try this, this also works. But i suggest to use approach specified by Smeegs.

This method adds an extra process to the body for an animation while approach by Smeegs directly deals where the animation is applied and no need for an extra animation process on body