Home/ Questions/Q 8240461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T20:30:01+00:00

i have a HTML structure which contains many small box, i want when page

  • 0

i have a HTML structure which contains many small box, i want when page load the box will come right to left. For doing this i have function but i want box should come one by one.

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jsBin demo

    Add some initial right value:

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

    Than use:

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


jhj();
    • 0