title: jQuery .animate() for simple horizontal slider not working as intended
body: <p>I have tried to modify this jQuery slider solution: <a href="https://stackoverflow.com/a/9864636/908491">https://stackoverflow.com/a/9864636/908491</a> (using the first solution - <a href="http://jsfiddle.net/sg3s/rs2QK/" rel="nofollow noreferrer">http://jsfiddle.net/sg3s/rs2QK/</a>).</p>
  
  <p><strong>Here is my jsFiddle: <a href="http://jsfiddle.net/markrummel/KSHSX/" rel="nofollow noreferrer">http://jsfiddle.net/markrummel/KSHSX/</a>.</strong></p>
  
  <p>The DIV sliding in works just fine, but the one being slid out jumps away, instead of sliding out smoothly at the same rate as the DIV sliding in. I have commented out <code>.hide()</code> in the javascript and <code>overflow:hidden</code> in the CSS, so that I could see where the DIV being slid out goes.</p>
  
  <p>This is my first time using <code>.animate()</code>, so any help you can offer is greatly appreciated!</p>
  
  <p>Here is my javascript:</p>
  
  <pre><code>$('.date-nav-prev').click(function () {
      $('.date-nav-next').show();
      var current = $('.visible-actions');
      var prev = current.prev('.user-actions');
      current.removeClass('visible-actions').animate({
          left: current.width()
      }, 500, function() {
          //current.hide();
      });
      prev.addClass('visible-actions').show().css({
          left: -(prev.width())
      }).animate({
          left: 0
      }, 500);
  });
  
  $('.date-nav-next').click(function () {
      var current = $('.visible-actions');
      var next = current.next('.user-actions');
      current.removeClass('visible-actions').animate({
          left: -(current.width())
      }, 500, function() {
          //current.hide();
      });
      next.addClass('visible-actions').show().css({
          left: prev.width()
      }).animate({
          left: 0
      }, 500);
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button class="date-nav-prev"&gt;&lt; Prev&lt;/button&gt;
  &lt;button class="date-nav-next"&gt;Next &gt;&lt;/button&gt;&lt;br /&gt;
  &lt;div id="wrapper"&gt;
    &lt;div class="user-actions daysAgo2"&gt;
        Actions from 2 Days Ago&lt;/div&gt;
    &lt;div class="user-actions yesterday"&gt;
        Yesterday's Actions&lt;/div&gt;
    &lt;div class="user-actions today visible-actions"&gt;
        Today's Actions&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.user-actions.yesterday, .user-actions.daysAgo2, .date-nav-next {display:none;}
  #wrapper{width:250px; height:300px; border:1px solid #333;position:relative; float:left;
   /*overflow:hidden;*/
  }
  .user-actions {width:100%; height:100%; position:relative; float:left; overflow:hidden; margin:0;}
  .today {background:green;}
  .yesterday {background:yellow;}
  .daysAgo2 {background:orange;}
  </code></pre>