jquery - Sliding Div's removing 1st one from left and adding new from right -

i have 3 div section horizontaly want after time interval left div removed , new div added right direction

this html file having 3 div sections within outer div

html

<div id="sub-category">   <div id="sub-category1">   </div>   <div id="sub-category2">   </div>   <div id="sub-category3">   </div> </div> 

in jquery time interval of 5sec after every 5sec slidedivsection(). right removing first div , shifting not adding new div right.

jquery

 function slidediv(){         setinterval(function(){slidedivsection()}, 5000);  }   function slidedivsection(){                  $("#sub-category1").slideup();          $("#sub-category1").remove();          $("#sub-category2").attr('id',"sub-category1");//setting id of sub-cateogry2 sub category1       $("#sub-category2").attr("id","sub-category2");//setting id of sub-cateogry3 sub category2   // adding new div          $("#sub-cateogry").append("<div id='#sub-cateogry3'></div>"); //giving slidedown effect newly created div      $("#sub-cateogry3").slideup();    }      $("document").ready(slidediv); 

css

#sub-category {     border:solid 0px black;     width:686px;     height:275px;     position: relative;     margin:5px; } #sub-category1 {     border:solid 1px black;     width:223px;     height:293px;     position: relative;     float:left;     background-color:grey; } #sub-category2 {     border:solid 1px black;     width:223px;     height:293px;     position: relative;     margin-left: 5px;     float:left;     background-color:lightskyblue; } #sub-category3 {     border:solid 1px black;     width:222px;     height:293px;     position: relative;     float:right;     background-color:lightgreen; } 

you might want jsfiddle

markup

<div id="sub-category">     <div id="sub-category1" class="item">item 1</div>     <div id="sub-category2" class="item">item 2</div>     <div id="sub-category3" class="item">item 3</div> </div> 

css

    #sub-category{         border: 0 solid black;         height: 295px;         margin: 5px 300px;         overflow: hidden;         position: relative;         width: 675px;      }      .item{         position: absolute;         left:0;         top: 0;         width: 223px;         height: 293px;         border: solid 1px black;         background: #046380;         font: 44px/262px georgia;         text-align: center;         font-style: italic      }      #sub-category1{         background-color: grey;      }      #sub-category2{         background-color: #ffc; left: 225px;      }      #sub-category3{         left: 450px;         background-color: lightgreen;      } 

and javascript

    function slidedivsection() {         var items = ['sub-category1', 'sub-category2', 'sub-category3'];         var container = $('#sub-category')         var item_width = 225;          window.setinterval(function () {             var first = $('.item:first', container);            var faux_id = first.attr('id') + 'faux';            var faux_elem = $($('<div/>').append(first.clone()).html()).attr('id', faux_id).css({               left: item_width * items.length,               backgroundcolor: first.css('background-color')            })            container.append(faux_elem);            faux_elem = $('#' + faux_id, container);             $('.item', container).animate({               left: '-=' + item_width            }, 500, function () {               first.remove();               faux_elem.attr('id', faux_elem.attr('id').replace('faux', ''))            })         }, 2000)      }       $(function(){         slidedivsection();      }) 

this solution removes item 1 end , inserts again other end. end seamlessly cycling initial elements. behavior changed "adding new (and distinct) element" after removing element.