Question

我写了这段代码：3个云飞过我的网站问题是：我怎么能缩短这个？（例如：在一个函数或类似的东西中）

var x1 = 1500-Math.random()*2000;
function animateDivers1() {
    var y1 = 500-Math.random()*600;
    $('.section1 .cloud1').css('left', x1);
    $('.section1 .cloud1').css('top', y1);
    x1 = -400;  
    var time = 15000+Math.random()*10000;
    $('.section1 .cloud1').animate({
        left: x1+2000
    }, time, "linear", animateDivers1
)}
animateDivers1();


var x2 = 1500-Math.random()*2000;
function animateDivers2() {
    var y2 = 500-Math.random()*600; 
    $('.section1 .cloud2').css('left', x2);
    $('.section1 .cloud2').css('top', y2);
    x2 = -400;  
    var time = 15000+Math.random()*10000;
    $('.section1 .cloud2').animate({
        left: x2+2000
    }, time, "linear", animateDivers2
)}
animateDivers2();


var x3 = 1500-Math.random()*2000;
function animateDivers3() {
    var y3 = 500-Math.random()*600; 
    $('.section1 .cloud3').css('left', x3);
    $('.section1 .cloud3').css('top', y3);
    x3 = -400;  
    var time = 15000+Math.random()*10000;
    $('.section1 .cloud3').animate({
        left: x3+2000
    }, time, "linear", animateDivers3
)}
animateDivers3();

当然我想添加更多 - 但重复此代码似乎很傻

Answer 1

function animateDivers(cloud, iter=0) {
    var x = (iter == 0) ? 1500-Math.random()*2000 : -400
    var y = 500-Math.random()*600; 
    $('.section1 '+cloud).css('left', x);
    $('.section1 '+cloud).css('top', y);
    x = -400;  
    var time = 15000+Math.random()*10000;
    $('.section1 '+cloud).animate({
        left: x+2000
    }, time, "linear", function() { animateDivers(cloud, iter+1) }
)}

for (i=1;i<=3;i++) { 
    animateDivers(".cloud" + i); 
}

jQuery - 如何不重复代码？

1 个答案: