Question

我有三个DIVS，#clouds-1，#clouds-2，#clouds-3，其中每个都有不同云的背景。我正在向上和向右动画，但无法达到我想要的效果。问题是，当进入下一个功能时，动画会停止为1-2s，这是我不想要的，我希望mto移动缓慢而平滑。

这是我到目前为止的代码：

// Clouds - 1
$(document).ready(function() {
    function moveRight() {
        $("div#clouds-1").animate({
           top:'-=24px',
           right: '+=50px'
        }, 8000, moveLeft);
    }

    function moveLeft() {
        $("div#clouds-1").animate({
            top:'+=24px',
            right: '-=50px'
        }, 8000, moveRight);
    }

    moveRight();
});

// Clouds - 2
$(document).ready(function() {
    function moveRight() {
        $("div#clouds-2").animate({
           top:'-=24px',
           right:'-=80px'
        }, 8000, moveLeft);
    }

    function moveLeft() {
        $("div#clouds-2").animate({
            top:'+=24px',
            right:'+=80px'
        }, 8000, moveRight);
    }

    moveRight();
});

// Clouds - 3
$(document).ready(function() {
    function moveRight() {
        $("div#clouds-3").animate({
           top:'+=24px',
           right:'+=100px'
        }, 8000, moveLeft);
    }

    function moveLeft() {
        $("div#clouds-3").animate({
            top:'-=24px',
            right:'-=100px'
        }, 8000, moveRight);
    }

    moveRight();
});

Answer 1

试试这个：

从http://www.spritely.net/

下载js

HTML：

<head>
    <script type="text/javascript" src="js/jquery.spritely.js"></script>
</head>
    <div id="wrapper">
        <div id="cloud-01"></div>
        <div id="cloud-02"></div>
    </div>

使用Javascript：

$(document).ready(function(){   
        $('#ground').pan({fps: 30, speed: 3, dir: 'right'});
        $('#cloud-01').pan({fps: 30, speed: 3, dir: 'right'});

});

希望这会对你有所帮助。

使用jQuery动画，动画更平滑而不会暂停

1 个答案: