jQuery图像动画循环答案

【问题标题】：jQuery image animation loopjQuery图像动画循环
【发布时间】：2012-11-14 02:04:07
【问题描述】：

对不起，我是一个有代码的大菜鸟，我正试图弄清楚如何让云在天空中以随机间隔水平移动。这是一个链接：https://dl.dropbox.com/u/34829763/americasrole/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>What's America's role in our world?</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
    <script src="jquery-1.8.2.min.js"></script>
</head>
<body>
    <div id="background">
        <img class= "cloud" id="cloud1" src="cloud1.png"/>
        <img class= "cloud" id="cloud2" src="cloud1.png"/>
        <img class= "cloud" id="cloud3" src="cloud1.png"/>
        <img class= "cloud" id="cloud4" src="cloud1.png"/>
    </div>
    <div id="foreground">
        <img id="fg" src="foreground.png"/>
    </div>

<script>
$(document).ready(function() {
    var delay = 2000;
    var $cloud = $('.cloud');
    var numRand = Math.floor(Math.random()*2000)+9000;
    function runIt() {
        $cloud.animate({
            left: "+1100",
        }, numRand, function() {
            $cloud.removeAttr("style");
            runIt();
        });
    }

    runIt();
});


</script>
</body>
</html>

CSS：

#background{
    background: url("background.png");
    width:1024px;
    height:768px;
}

#foreground{
    position: absolute;
    top:10px;
    left:10px;
    width:1024px;
    height:768px;
    z-index: 1000;
}

#fg{
    z-index: 10000;
}

#cloud1{
    position: absolute;
    left: 100px;
    top:10px;

}
#cloud2{
    position: absolute;
    left: 10px;
    top:150px;
    width:170px;
    height:99px;
}
#cloud3{
    position: absolute;
    left: -150px;
    top:250px;
}

#cloud4{
    position: absolute;
    left: 400px;
    top:100px;
    width:170px;
    height:99px;
}

非常感谢。

【问题讨论】：

标签： jquery html css animation loops

【解决方案1】：

如果您真的希望每朵云随机且单独地制作动画，那么您必须单独为每朵云制作动画，而不是将它们全部作为一组制作。实际上，您将在第一个动画完成后立即重新开始所有动画，并让它们都按相同的时间表进行。

改成这样：

$(document).ready(function() {

    function runIt(item$) {
        var numRand = Math.floor(Math.random()*2000)+9000;
        item$.animate({left: "+1100"}, numRand, function() {
            item$.css("left", "");   // set back to default
            runIt(item$);            // start again
        });
    }

    // start each cloud separately
    $('.cloud').each(function() {
        runIt($(this));
    });

});

这是一个工作版本，我调整了一些参数以使云离开右边缘，然后从左边缘进入：http://jsfiddle.net/jfriend00/rZRud/

【讨论】：

非常感谢！它看起来超级整洁。我正在尝试理解代码。当我保存代码时，云不会移动：dl.dropbox.com/u/34829763/americasrole/index.html 但它在您的 jsfiddle 上运行得如此完美
@Agatha 你有一个非法字符Timestamp: 13/11/2012 7:17:04 PM Error: SyntaxError: illegal character Source File: https://dl.dropbox.com/u/34829763/americasrole/index.html Line: 37, Column: 4 Source Code: });â€‹ ...确保你的编辑器使用没有 BOM 编码的 UTF-8 并以二进制模式上传你的文件。