0

申し訳ありませんが、私はコードの初心者であり、空のランダムな間隔で水平方向に移動する雲をループする方法を理解しようとしています。リンクは次のとおりです: 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;
}

どうもありがとう。

4

1 に答える 1

4

各雲をランダムに別々にアニメーション化することが本当に必要な場合は、すべての雲をグループとして行うのではなく、各雲を個別にアニメーション化する必要があります。そのままでは、最初のアニメーションが終了するとすぐにすべてのアニメーションを再開し、すべてのアニメーションを同じスケジュールに保ちます。

これに変更します。

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

于 2012-11-14T02:15:13.763 に答える