Question

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

我希望三个云在不同的起始点开始并以不同的速度移动。在动画完成一次后，我希望云从屏幕的右端开始并以速度继续。

在我的例子中，第一遍开始正确，但在那之后，一切似乎都在一起，我不想要。一旦云完成完成，我希望它再次从右边开始，而不是等待其他两个云。

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

$(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

不要为所有三个云设置15000ms，尝试为不同的云设置不同的时间来制作动画。如：

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

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

1 个答案: