Overlapping slides in jquery, divs get overlapped
<p>the first block here is for the automatic sliding of the divs after every 5 secs</p>

<pre><code>$(document).ready(function(){

                    var refreshId = setInterval( function() 
                    {    
                        $('.box').each(function() {
                            if ($(this).offset().left &lt; 0) {
                                $(this).css("left", "150%");
                            } else if ($(this).offset().left &gt; $('#container').width()) {
                                $(this).animate({
                                    left: '50%'
                                }, 500 );
                            } else {
                                $(this).animate({
                                    left: '-150%'
                                }, 500 );
                            }
                        });
                    },5000);

 //the second block is to move the div's to left on clicking the leftbutton               

         $(".leftbutton").click(function(){
                    $('.box').each(function() {
                        if ($(this).offset().left &lt; 0) {
                            $(this).css("left", "150%");
                        } else if ($(this).offset().left &gt; $('#container').width()) {
                            $(this).animate({
                                left: '50%'
                            }, 500 );
                        } else {
                            $(this).animate({
                                left: '-150%'
                            }, 500 );
                        }
                    });
                });
the third block is to move the div's to right side on click of right button



               $(".rightbutton").click(function(){
                    $('.box').each(function() {
                        if ($(this).offset().left &lt; 0) {
                            $(this).animate({
                                left: '50%'
                            }, 500 );
                        } else if ($(this).offset().left &gt; $('#container').width()) {
                            $(this).css({
                                'left': '-150%'
                            } );
                        } else {
                            $(this).animate({
                                left: '150%'
                            }, 500 );
                        }
                    });
                });
            });


//the below is the HTML

&lt;div id="container"&gt;

        &lt;div id="box1" class="box"&gt;Div #1&lt;/div&gt;
        &lt;div id="box2" class="box"&gt;Div #2&lt;/div&gt;
        &lt;div id="box3" class="box"&gt;Div #3&lt;/div&gt;

    &lt;/div&gt;

// the below is the CSS



 body {
        padding: 0px;    
    }

    #container {
        position: absolute;
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;  
    }

    .box {
        position: absolute;
        width: 50%;
        height: 300px;
        line-height: 300px;
        font-size: 50px;
        text-align: center;
        border: 2px solid black;
        left: 50%;
        top: 100px;
        margin-left: -25%;
    }

    #box1 {
        background-color: green;
        left: -150%;
    }

    #box2 {
        background-color: yellow;
    }

    #box3 {
        background-color: red;
        left: 150%;
    }
</code></pre>

<p>so basically after a few trials and errors the divs 1,2 &amp; 3 are overlapping and only one div is visible. I guess you will have to try the code a few times before getting to the problem.
        ​</p>
