在每個循環中工作的最後一個元素

Question

我想要一個動畫，其中我將隨機左值和頂值賦值給div併爲其設置動畫，但也希望動畫在完成後重新啓動。所以我發射了自己的動畫函數，但在第一個動畫之後，只有最後一個重複的div元素是動畫。我不喜歡這樣的：

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/ 小提琴這裏我因此未使用 '爲'：https://jsfiddle.net/744sx34v/

Answer 1

移動功能，以一個單獨的功能和循環中調用它：

function getRandomArbitrary(min, max) { 
 
     return Math.random() * (max - min) + min; 
 
    } 
 
    
 
    function anim(object){ 
 
    
 
    \t 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); 
 
    \t $(this).css({"left": abc+"%", "top": xyz+"%"}); 
 
     
 
     // call the animate function which calls itself recursively 
 
    \t 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>

Answer 2

你不需要for循環，需要遞歸調用animate()特定元素也隨機設置top和left CSS屬性。

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>