Div position change using jquery
<p>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.</p>

<pre><code>&lt;head&gt;

&lt;style&gt;

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;}

&lt;/style&gt;

&lt;script type="text/javascript" src="jquery-1.7.2.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

function jhj (){

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

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

    }


window.onload= jhj

&lt;/script&gt;


&lt;/head&gt;

&lt;body&gt;
&lt;div class="container"&gt;

&lt;div class="box1"&gt;&lt;/div&gt;
&lt;div class="box1"&gt;&lt;/div&gt;
&lt;div class="box1"&gt;&lt;/div&gt;

&lt;div class="box1"&gt;&lt;/div&gt;
&lt;div class="box1"&gt;&lt;/div&gt;
&lt;div class="box1"&gt;&lt;/div&gt;


&lt;/div&gt;

&lt;/body&gt;
</code></pre>
