Question

我有一个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>

Answer 1

jsBin demo

添加一些初始正确的值：

.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();

使用jquery更改div位置

1 个答案:

jsBin demo