jquery cycle plugin: move new slide in before moving previous slide out?

Question

I would like to make a a slideshow build from divs going from left to right. But instead of simply letting current slide move out and the next slide move in, I would like to have a nicer animation using the cycle plugin in combination with the easing functions.

The animation/transition I am looking for is described as follows: Say the current slide is in view, than the next slide should bounce to the left side of the current one, effectively kicking the current one out, and then the new one should appear. I have sort of worked it out, but I just can't get the timing of the incoming and leaving slides right.

For completeness, I am using jquery 1.8.3, easing 1.3 anc cycle-plugin 2.99

Below is what I have now, any help is appreciated.

HTML:

<div id="fixed_box">
    <div class="slide">
        <h4>Slide 1</h4>
    </div>
    <div class="slide">
        <h4>Slide 2</h4>
    </div>
    <div class="slide">
        <h4>Slide 3</h4>
    </div>
    <div class="slide">
        <h4>Slide 4</h4>
    </div>
    <div class="slide">
        <h4>Slide 5</h4>
    </div>
</div>

<style>
    #fixed_box {position:relative; width:300px; height:180px; background-color:000000; color:white; left:100px;}
    .slide {position:relative; width:250px; height:130px; padding:2px 8px; overflow:hidden; background-color:#777777;}
</style>


<script type="text/javascript">
    $(function(){
        $("#fixed_box").before('<div id="nav">').cycle({
            fx: 'scrollRight',          
            timeout: 1000,
            pager: '#nav',
            easeIn: 'easeInBounce',
            easeOut: 'linear',
            speedIn: 2000,
            speedOut: 1000,
            sync: 1000
        });             
    });
</script>