title: Simple jquery slider effect from the very core
body: <hr>
  
  <p><strong>MAIN EDIT:</strong></p>
  
  <p>This will help to explain the question better, take a look of <a href="http://jsfiddle.net/Z6Dgb/" rel="nofollow">this</a>, as you can see, the two slides changes using a fading effect, how can I change this effect for an sliding to the left effect like the one you see in tree exploration on <a href="https://github.com/lockitron/selfstarter" rel="nofollow">Github</a> ?</p>
  
  <hr>
  
  <p>Picture two divs, one called Master and the second one Slave. </p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="master" style="background-color:#ABC;"&gt;1&lt;/div&gt;
    &lt;div id="slave" style="background-color:#CBA;"&gt;2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The content on the slave div gets updated via ajax only when a button get press on the master div (already programed), on success (the ajax call finish and the div slave is updated) I want the Master div to slide to the left while the slave div slide too.</p>
  
  <p>On the first state the user can only see the Master div, slave is invisible, when the button is pressed master slide goes out to the left and Slave slides to ocupy the original master position (just a simple slider). As I said, I already program all the basic interactions on jquery and the server side code (php + ajax), but I have NO idea how to set the css in order to accomplish this, for the animations im using a simple <code>$('#div').slideLeft(400);</code> </p>
  
  <p>I dont want to use any existant jquery plugin or html5 or css3 (if possible), just want to keep it simple, but again, im not very good front-end dev and figuring out the css to get this right is driving me crazy. Thanks for any help!</p>
  
  <p><strong>EDIT</strong>
  I meant when i said slideLeft:</p>
  
  <pre><code>$(this).hide("slide", { direction: "left" }, 1000);
  $(this).show("slide", { direction: "left" }, 1000);
  </code></pre>