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/