0

我有三个 DIVS, #clouds-1, #clouds-2, #clouds-3，它们每个都有不同云的背景。我正在将它们向上和向右设置动画，但无法获得我想要的效果。问题是，当转到下一个功能时，动画会停止 1-2 秒，这是我不想要的，我希望 m 移动缓慢但平稳。

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

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

1 回答 1

0

试试这个：

从下载 js http://www.spritely.net/

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

});

希望这会帮助你。

于 2013-07-12T12:57:46.287 回答