Question

---

MAIN EDIT:

This will help to explain the question better, take a look of this, 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 Github ?

---

Picture two divs, one called Master and the second one Slave.

<div id="container">
  <div id="master" style="background-color:#ABC;">1</div>
  <div id="slave" style="background-color:#CBA;">2</div>
</div>

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.

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 $('#div').slideLeft(400);

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!

EDIT
I meant when i said slideLeft:

$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);

Answer 1

By using the css2 “clip” property, adding one extra container div [to make the clip work] and by slightly modifying your fiddle code to rely on animate instead of fadeIn and fadeOut, this effect is possible. However, the solution isn’t as simple as you might like it to be, or as clean. Neverless, it works.

HTML:

<div style="position:relative;width:200px;height:100px;left:100px;">
    <div style="position:absolute;clip:rect(0px,200px,100px,0px);overflow:none;width:200px;height:100px">
    <div class="table-cont" style="display: none; position:absolute; background-color:#ABC;width:100%;height:100px;"></div>
    <div class="table-coupons" style="display: none; position:absolute;top: 0px; background-color:#CBA;width:100%;height:100px;"></div>
</div>
</div>

JS:

 $(document).ready(function() {

$('div.table-coupons').css({opacity:0,marginLeft:200});

     calltable();
        function calltable()    {
$('div.table-coupons').css('display','block');
$('div.table-cont').css('display','block');

            $('div.table-coupons').animate({opacity:0,marginLeft:200},{ duration: 300, queue: false,complete:function(){$(this).css('display', 'none')}});
            $('div.table-cont').html('HELLO World! <a href="#" class="coupon_link">Next</a>');
            $('div.table-cont').animate({opacity:1,marginLeft:0},{ duration: 300, queue: false });
            $('a.coupon_link').click(function() { next_slide(); });
        }
        function next_slide() {
$('div.table-coupons').css('display','block');
$('div.table-cont').css('display','block');

            $('div.table-cont').animate({opacity:0,marginLeft:-200},{ duration: 300, queue: false, complete:function(){$(this).css('display', 'none')}});
            $('div.table-coupons').html('HELLO again! <a href="#" class="back_link">Back</a>');
            $('div.table-coupons').animate({opacity:1,marginLeft:0},{ duration: 300, queue: false });
            $('a.back_link').click(function() { back_slide(); });            
        } 
        function back_slide() {    
            calltable();            
        }            

 });

JSFiddle: http://jsfiddle.net/97pcj/1/