Animation de plusieurs éléments avec des balises href uniques

Question

J'essaie de créer 4 ou 5 éléments différents sur une page qui sont animés pour se déplacer de manière aléatoire à travers l'élément conteneur avec chaque élément ayant un lien unique.

J'ai du mal à comprendre comment générer 5 div différents avec des liens uniques et les faire tous se déplacer aléatoirement/indépendamment les uns des autres autour de la page.

jsFiddle ici: https://jsfiddle.net/vyvqLza7/

code JS:

  $(document).ready(function() { 
      newDiv(); 
      newDiv2(); 
     }); 

     function newDiv() { 
      var $div = $("<div class='a'><a href='#'>"); 
      $(".animatedDivs").append($div); 
      animateDiv(); 
      var $div2 = $("<div class='a'><a href='#'>"); 
      $(".animatedDivs").append($div2); 
      animateDiv2(); 

      function animateDiv() { 
       var newq = makeNewPosition(); 
       var oldq = $div.offset(); 
       var speed = calcSpeed([oldq.top, oldq.left], newq); 

       $div.animate({top: newq[0],left: newq[1]}, speed, function() {animateDiv();}); 
      }; 

      function animateDiv2() { 
       var newq = makeNewPosition(); 
       var oldq = $div.offset(); 
       var speed = calcSpeed([oldq.top, oldq.left], newq); 

       $div.animate({ top: newq[0], left: newq[1] }, speed, function() { animateDiv(); }); 
      }; 
     } 

     function makeNewPosition() { 
      // Get viewport dimensions (remove the dimension of the div) 
      var h = 500-80; 
      var w = $(window).width() - 80; 
      var nh = Math.floor(Math.random() * h); 
      var nw = Math.floor(Math.random() * w); 
      return [nh, nw]; 
     } 

     function calcSpeed(prev, next) { 
      var x = Math.abs(prev[1] - next[1]); 
      var y = Math.abs(prev[0] - next[0]); 
      var greatest = x > y ? x : y; 
      var speedModifier = .4; 
      var speed = Math.ceil(greatest/speedModifier); 
      return speed; 

     } 

Answer 1

L'autre réponse est correcte pour animer 5 divs. Pour créer en plus un lien aléatoire, vous pouvez passer une variable link à votre fonction newDiv(). Je ne sais pas comment vos liens devraient ressembler, mais ci-dessous est un exemple de la façon de créer des liens uniques comme une chaîne aléatoire.

  $(document).ready(function() { 
 
      \t var divCount = 5; 
 
      
 
       for (i = 0; i < divCount; i++) { 
 
       newDiv(i+"_"+(new Date).getTime()); 
 
       } 
 

 
      }); 
 

 
      function newDiv(link) { 
 
       var $div = $("<div class='a'><a href='#"+link+"'>"); 
 
       $(".animatedDivs").append($div); 
 
       animateDiv(); 
 

 

 
       function animateDiv() { 
 
        var newq = makeNewPosition(); 
 
        var oldq = $div.offset(); 
 
        var speed = calcSpeed([oldq.top, oldq.left], newq); 
 

 
        $div.animate({top: newq[0],left: newq[1]}, speed, function() {animateDiv();}); 
 
       }; 
 

 
      } 
 

 
      function makeNewPosition() { 
 
       // Get viewport dimensions (remove the dimension of the div) 
 
       var h = 500-80; 
 
       var w = $(window).width() - 80; 
 
       var nh = Math.floor(Math.random() * h); 
 
       var nw = Math.floor(Math.random() * w); 
 
       return [nh, nw]; 
 
      } 
 

 
      function calcSpeed(prev, next) { 
 
       var x = Math.abs(prev[1] - next[1]); 
 
       var y = Math.abs(prev[0] - next[0]); 
 
       var greatest = x > y ? x : y; 
 
       var speedModifier = .4; 
 
       var speed = Math.ceil(greatest/speedModifier); 
 
       return speed; 
 

 
      }

.lemonade { 
 
    width: 100%; 
 
    background: #000; 
 
    height: 500px; 
 
    position: relative; 
 
} 
 

 
.a { 
 
    height: 10px; 
 
    width: 10px; 
 
    background: #fff; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container-fluid lemonade"> 
 
\t <div class="animatedDivs"> 
 
\t \t &nbsp;</div> 
 
</div>

EDIT: Le même exemple avec des liens définis manuellement: Fiddle

Answer 2

la création de votre divs et après leur création, vous pouvez les cibler pour les animer. Vous n'avez pas besoin de créer votre divs avec JS (mais vous pouvez, si vous avez besoin)

HTML:

<div class='animatedDivs'> 
    <div class='animate'>...</div> 
    <div class='animate'>...</div> 
    <div class='animate'>...</div> 
    <div class='animate'>...</div> 
    <div class='animate'>...</div> 
</div> 

JS:

$('.animate').forEach(animateDiv); 

function animateDiv(div) { 
    var newq = makeNewPosition(); 
    var oldq = div.offset(); 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 
    div.animate({ top: newq[0], left: newq[1] }, speed,() => animateDiv(div)); 
} 

De cette façon, chaque div appelle une nouvelle position pour lui-même à chaque fois.