last element working in each loop

Question

I wanted an animation where i assign random left and top values to divs and animate them, but also wanted the animation to restart after finishing. so i fired the animate function inside itself, but after the first animation, only the last repeating div element was animating. I did like this:

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

$(".dot").each(function(){

    var abc = getRandomArbitrary(0,100);
    var xyz = getRandomArbitrary(0,100);
    var aaa = getRandomArbitrary(0,100);
    var yyy = getRandomArbitrary(0,100);
    $(this).css({"left": abc+"%", "top": xyz+"%"})
    $thiss = $(this);
    for(var i=0; i< $(".dot").length;i++){
        function anim(){
            $thiss.animate({"left":yyy+"%", "top": aaa+"%"},1000,function(){
                anim();
            });
            console.log(i)
        }
    }
    anim();
});

html:

<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>

css:

.dot{width: 8px; height: 8px; border-radius: 100%; background: red; position: absolute;}

jsfiddle: https://jsfiddle.net/qfcmfzw7/ fiddle where i didnot use the 'for': https://jsfiddle.net/744sx34v/

for demo use <> snippet

guradio
– guradio

2017-03-03 06:42:02 +00:00
Commented Mar 3, 2017 at 6:42 — guradio
– guradio, Commented Mar 3, 2017 at 6:42
can you pls make a clarity in fiddle link provided

SAMUEL
– SAMUEL

2017-03-03 06:49:29 +00:00
Commented Mar 3, 2017 at 6:49 — SAMUEL
– SAMUEL, Commented Mar 3, 2017 at 6:49

KAD · Accepted Answer · 2017-03-03 07:04:36Z

3

Move the functionality to a seperate function and call it within the loop:

function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
    }
    
    function anim(object){
    
    	   var aaa = getRandomArbitrary(0,100);
         var yyy = getRandomArbitrary(0,100);

         object.animate({"left":yyy+"%", "top": aaa+"%"},1000,function(){
              anim(object);
         });
     }
         
     $(".dot").each(function(){
     
        // set the initial position of each div
        var abc = getRandomArbitrary(0,100);
        var xyz = getRandomArbitrary(0,100);
    	  $(this).css({"left": abc+"%", "top": xyz+"%"});
        
        // call the animate function which calls itself recursively
    	  anim($(this));
     });

.dot{width: 8px; height: 8px; border-radius: 100%; background: red; position: absolute;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>

edited Mar 3, 2017 at 7:04

answered Mar 3, 2017 at 6:54

KAD

11.2k4 gold badges34 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3450590 Over a year ago

Thanks a lot @KAD !

KAD Over a year ago

You're Welcome :)

Satpal · Accepted Answer · 2017-03-03 10:17:05Z

You don't need the for loop and need to recursively call the animate() for a specific element which also Randomly sets the top and left CSS property.

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

$(".dot").each(function() {
  //Initially set left and top afterwards animate will take care of it
  var left = getRandomArbitrary(0, 100);
  var top = getRandomArbitrary(0, 100);
  $this = $(this);
  $this.css({
    "left": left + "%",
    "top": top + "%"
  })
  animate($this);
});

function animate($this) {
  var left = getRandomArbitrary(0, 100);
  var top = getRandomArbitrary(0, 100);
  $this.animate({
    "left": left + "%",
    "top": top + "%"
  }, 1000, function() {
    animate($this);
  });
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: red;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>

Collectives™ on Stack Overflow

last element working in each loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related