javascript - 「カード」効果のスライド-スライドアウトしますが、スライドインしません

Question

次のコードを使用して、各「カード」がリスト要素であり、画面上をスライドするスライドカード効果を作成しています。それらは、特定の高さと幅で設定した「ステージ」内でのみ表示されます。カードは左にうまくスライドしますが、右から内側に同じスライド機能を実行しないことを除いて、それはうまく機能しています。代わりに、それは単にページにジャンプし、少し驚くように見えます。

次のリストアイテムを単に表示するのではなく、右からスライドさせる方法を知っている人はいますか？

ありがとう！

JS：

window.addEvent('domready', function () {
    var totIncrement = 0;
    var increment = 968;
    var maxRightIncrement = increment * (-303); //this is -303 because there are 303 cards, but the example below only has 3
    var fx = new Fx.Style('slider-list', 'margin-left', {
        duration: 300,
        //transition: Fx.Transitions.Back.easeInOut,
        wait: true
    });
    // EVENTS for the button "previous"
    var pbuttons = document.getElementsByClassName('prevButton');
    for(i = 0; i < pbuttons.length; i++) {
        $(pbuttons[i]).addEvents({
            'click': function (event) {
                if(totIncrement > maxRightIncrement) {
                    totIncrement = totIncrement + increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }
        });
    }
    //-------------------------------------
    // EVENTS for the button "next"
    // var buttons = $('.nextButton');
    var buttons = document.getElementsByClassName('nextButton');
    for(i = 0; i < buttons.length; i++) {
        $(buttons[i]).addEvents({
            'click': function (event) {
                if(totIncrement > maxRightIncrement) {
                    totIncrement = totIncrement - increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }
        });
    }
});

HTML：

<div id="slider-stage">
    <ul id="slider-list">
        <li id="l1">
            <!-- previous button -->
            <div class="prev"><a class="prevButton" href="#">Previous</a></div>
            <div>
                <!-- content goes here -->
                <!-- next button -->
                <div class="slider-buttons">
                    <a class="nextButton" href="#">Next</a>
                </div>
            </div>
        </li>
        <li id="l2">
            <!-- previous button -->
            <div class="prev"><a class="prevButton" href="#">Previous</a></div>
            <div>
                <!-- content goes here -->
                <!-- next button -->
                <div class="slider-buttons">
                    <a class="nextButton" href="#">Next</a>
                </div>
            </div>
        </li>
        <li id="l3">
            <!-- previous button -->
            <div class="prev"><a class="prevButton" href="#">Previous</a></div>
            <div>
                <!-- content goes here -->
                <!-- next button -->
                <div class="slider-buttons">
                    <a class="nextButton" href="#">Next</a>
                </div>
            </div>
        </li>
    </ul>
</div>