Анимация элементов с одинаковым классом Независимо

Question

У меня есть неупорядоченный список с несколькими вложенными неупорядоченными списками. Я пытаюсь анимировать несколько вложенных <ul></ul> независимо от случайной позиции в содержащем div. У меня есть случайная позиция, но она дает эту позицию каждому вложенному <ul></ul>, а не дает каждому из них собственную случайную позицию. В HTML ниже я пытаюсь дать каждому классу mapStart-second свою собственную уникальную случайную позицию, и в этом случае они оба получат ту же позицию.

Пример HTML

<ul id="mapStart"> 

    <li id="mapStart-first"> 

     <ul class="mapStart-second"> 
      <li></li> 
     </ul> 

     <ul class="mapStart-second"> 
      <li></li> 
     </ul> 

    </li> 

</ul> 

JS/JQuery

jQuery('#mapStart-first').one('mouseenter', function() { 
    jQuery(this).find('.mapStart-second').fadeIn('slow').animate({ 
     top: Math.floor((Math.random()*aw_positionY)), 
     left: Math.floor((Math.random()*aw_positionX)), 
    });  
}); 

Переменные aw_positionsX и aw_positionY также быть динамически установлено и работает правильно.

Answer 1

Вам нужен цикл, или вы будете проездом одинаковые случайные значения для каждой анимации:

jQuery('#mapStart-first').one('mouseenter', function() { 
    jQuery(this).find('.mapStart-second').fadeIn('slow').each(function() { 
     $(this).animate({ 
      top: Math.floor((Math.random()*aw_positionY)), 
      left: Math.floor((Math.random()*aw_positionX)), 
     }); 
    }); 
});