Question

很抱歉，但我是一个有代码的新手，我正在试图弄清楚如何在天空中随机间隔水平移动云。这是一个链接：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;
}

非常感谢。

Answer 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/

jQuery图像动画循环

1 个答案: