title: Create frame for dynamically created slide using CSS and Jquery
body: <p>For more info, please see this <a href="http://jsfiddle.net/jtbowden/ykbgT/2/" rel="nofollow">JSFiddle</a>.</p>
  
  <p>I have successfully create a dynamic slides of DIV's. </p>
  
  <p>Here's the html:</p>
  
  <pre><code>&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 id="box4" class="box"&gt;Div #4&lt;/div&gt;
      &lt;div id="box5" class="box"&gt;Div #5&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the js code is:</p>
  
  <pre><code>$('.box').click(function() {
  
      $(this).animate({
          left: '-50%'
      }, 500, function() {
          $(this).css('left', '150%');
          $(this).appendTo('#container');
      });
  
      $(this).next().animate({
          left: '50%'
      }, 500);
  });
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>What I want to happen is to have a border (can be a div with pure css) around the slide boxes so that I can't see the <strong>transition animation at the sides</strong>.</p>