0

私は多くの小さなボックスを含むHTML構造を持っています、私はページのロード時にボックスが右から左に来るようにしたいです。これを行うために私は機能を持っていますが、ボックスが1つずつ来る必要があります。

<head>

<style>

body {margin:0; padding:0}

.box { position:absolute; background:#FF0000; height:300px; width:300px; margin:5px 5px; -webkit-transition-duration:0.15s}

.box1 { position:absolute; top:0; right:-300px; height:300px; width:300px;}

</style>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">

function jhj (){

    $('.container').find('.box1').each(function (i){

        $(this).delay(i*100).toggleClass('box1 box')        
        })

    }


window.onload= jhj

</script>


</head>

<body>
<div class="container">

<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>

<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>


</div>

</body>
4

1 に答える 1

1

jsBinデモ

初期の正しい値を追加します。

.box {
   right: -300px; /*initial position (off-screen)*/
}

使用するより：

function jhj(){
    $('.container').find('.box1').each(function (i, el){
        $(el).delay(i*100).animate({right: 300},800);
    });
}


jhj();
于 2012-07-17T06:34:53.133 に答える