jquery - カスタムスライダーが完全に機能しない

Question

作成したスライダーに問題があります。次のdivが画面に表示されたときに、divの上部に表示されるので、スムーズに見えます。私のjsfiddleを見ると、スライダーが入っていることがわかります。一番下で次に上にスキップします... http：//jsfiddle.net/Gfzwp/

あなたが私を助けることができればそれは素晴らしいことです、ありがとう！

html

    <div class="section">
        <div class="controls">
            <div class="next"><span class="hidden">Next</span></div>
        </div>
         <div class="gallery" id="one">
            <div class="box">one</div>
            <div class="box">two</div>
            <div class="box">three</div>
        </div>
        <div class="gallery" id="two">
            <div class="box">one</div>
            <div class="box">two</div>
            <div class="box">three</div>
        </div>
    </div>

css

    .section {
        width:100%;
        overflow:hidden;
        white-space:nowrap;
    }

    .gallery {
        width:100%;
        min-height:450px;
        display:inline-block;
        top:0;
        white-space:normal;
        float:left;
        padding:0px 0px 200px 49px;
    }

    .box {
        width:200px;
        height:200px;
        background:#ff0000;
        float:left;
        margin:0px 3px 3px 0px;    
    }

    .controls {
        position:absolute;
        z-index:3;
    }

    .controls .next {
        width:44px;
        height:133px;
        margin:0px 0px 0px 2px;
        cursor:pointer;
    }

jQuery    
​$('.controls .next').click(function(){
    $('.gallery#one').hide('slide', { direction: "left" }, 1000);
    $('.gallery#two').show('slide', { direction: "right" }, 1000);
});    ​

Answer 1

position:absoluteギャラリーCSSに追加します。

更新されたフィドル：http： //jsfiddle.net/johnkoer/Gfzwp/5/