0

我有一个包含许多小框的 HTML 结构，我希望在页面加载时框会从右到左。为此，我有功能，但我希望盒子应该一个一个来。

<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 回答