jquery - 使用 jquery animate 独立动画多个 div

Question

我正在尝试使用 jquery 执行云移动动画。

这是 JS Fiddle

我想让三朵云从不同的凝视点开始，以不同的速度移动。动画完成一次后，我希望云从屏幕的右端开始并继续以它们的速度移动。

在我的例子中，第一次通过是正确的，但在那之后一切似乎都对齐在一起，这是我不想要的。一朵云完成后，我希望它再次从右边开始，而不是等待另外两朵云。

这是我在加载时调用的函数。

$(document).ready(function () {

    function loopc1() {
        $('#cloud').css({ right: 0 });
        $('#cloud').animate({
            right: '900',
        }, 15000, 'linear', function () {
            loopc1();
        });
    }

    function loopc2() {
        $('#cloud1').animate({
            right: '900',
        }, 15000, 'linear', function () {
            $('#cloud1').css({ right: 0 });
            loopc2();
        });
    }

    function loopc3() {
        $('#cloud2').animate({
            right: '900',
        }, 15000, 'linear', function () {
            $('#cloud2').css({ right: 0 });
            loopc3();
        });
    }



    loopc1();
    loopc2();
    loopc3();

});

Answer 1

不要为所有三个云都设置 15000 毫秒，尝试为不同的云设置不同的时间以进行动画处理。例如:

    function loopc1() {
    $('#cloud').css({ right: 0 });
    $('#cloud').animate({
        right: '900',
    }, 15000, 'linear', function () {
        loopc1();
    });
}

function loopc2() {
    $('#cloud1').animate({
        right: '900',
    }, 20000, 'linear', function () {
        $('#cloud1').css({ right: 0 });
        loopc2();
    });
}

function loopc3() {
    $('#cloud2').animate({
        right: '900',
    }, 25000, 'linear', function () {
        $('#cloud2').css({ right: 0 });
        loopc3();
    });
}