如何让两个同class元素通过同一JavaScript函数实现独立运动？

你的问题核心是当前代码一次性给所有.circle元素应用了相同的随机位置，导致它们运动同步。要实现独立运动，需要为每个元素单独生成随机位置并启动动画。

修改后的JavaScript代码 #

$(document).ready(function(){
    // 遍历每个circle元素，分别启动动画
    $('.circle').each(function() {
        animation($(this));
    });
});

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

function new_position() {
    var newt = randomNumber(-50,50);
    var newl = randomNumber(-50,50);
    return [newt, newl];
}

// 修改animation函数，接收单个元素作为参数
function animation($element){
    var newpos = new_position();
    var speed = 2000;

    // 只对传入的当前元素执行动画
    $element.animate({ top: newpos[0], left: newpos[1] }, speed, function(){
        // 动画完成后，对当前元素再次调用animation，实现循环运动
        animation($element);        
    });
};

关键修改说明 #

• 遍历元素：用$('.circle').each()逐个处理每个圆形元素，确保每个元素都有独立的动画流程
• 动画函数参数化：让animation函数接收具体的jQuery元素对象，这样每次调用都只针对单个元素操作
• 独立随机位置：每个元素执行动画时，都会调用new_position()生成全新的随机坐标，不再共用同一个位置值

HTML和CSS代码无需修改，直接使用你原来的即可。这样两个圆形就会各自随机、独立地运动了。

内容的提问来源于stack exchange，提问作者sgalera