javascript - 独立地为具有相同类的元素设置动画

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)),
        });   
    });  
});