jquery - jqueryサイクルプラグイン:前のスライドを移動する前に新しいスライドを移動しますか?

Question

左から右へのdivからスライドショーを作成したいと思います。しかし、単純に現在のスライドを出して次のスライドを入れるのではなく、サイクル プラグインをイージング関数と組み合わせて使用​​して、より優れたアニメーションを作成したいと考えています。

私が探しているアニメーション/トランジションは次のように説明されています: 現在のスライドが表示されているとします。次のスライドが現在のスライドの左側にバウンスし、現在のスライドを効果的に蹴り出し、新しいスライドが表示されます。 . ある程度は解決しましたが、スライドの開始と終了のタイミングを正しく取得できません。

完全を期すために、私はjquery 1.8.3を使用し、1.3とサイクルプラグイン2.99を緩和しています

以下は私が今持っているものです。

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>