自定义滑块不太合适

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/