javascript - Create frame for dynamically created slide using CSS and Jquery -

for more info, please see jsfiddle.

i have create dynamic slides of div's.

here's html:

<div id="container">      <div id="box1" class="box">div #1</div>     <div id="box2" class="box">div #2</div>     <div id="box3" class="box">div #3</div>     <div id="box4" class="box">div #4</div>     <div id="box5" class="box">div #5</div>  </div> 

and js code is:

$('.box').click(function() {      $(this).animate({         left: '-50%'     }, 500, function() {         $(this).css('left', '150%');         $(this).appendto('#container');     });      $(this).next().animate({         left: '50%'     }, 500); }); 

and 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: 150%;     top: 100px;     margin-left: -25%; }  #box1 {     background-color: green;     left: 50%; }  #box2 {     background-color: yellow; }  #box3 {     background-color: red; }  #box4 {     background-color: orange; }  #box5 {     background-color: blue; } 

what want happen have border (can div pure css) around slide boxes can't see transition animation @ sides.

you can throw mask around position mask instance this:

http://jsfiddle.net/guaxd/1/

this should work pretty iframe due overflow:hidden.

body {     padding: 0px;     }  #container {     position: absolute;     margin: 0px;     padding: 0px;     width: 100%;     height: 100%;     overflow: hidden;   }  .box {     position: absolute;     width: 100%;     height: 300px;     line-height: 300px;     font-size: 50px;     text-align: center;     border: 2px solid black;     left: 100%;     top: -1px;     margin-left:-1px; }  #box1 {     background-color: green;     left: 0%; }  #box2 {     background-color: yellow; }  #box3 {     background-color: red; } #mask{     border:3px solid black;     position: absolute;     width: 50%;     height: 300px;     overflow:hidden; } #box4 {     background-color: orange; }  #box5 {     background-color: blue; } 

and html:

<div id="container">     <div id="mask">        <div id="box1" class="box">div #1</div>        <div id="box2" class="box">div #2</div>        <div id="box3" class="box">div #3</div>        <div id="box4" class="box">div #4</div>        <div id="box5" class="box">div #5</div>     </div> </div>