Question

I’m having trouble with a slider I have made, I need it so that when the next div comes onscreen that is at the top of the div, so it looks smooth, if you look at my jsfiddle you will see that it comes in at the bottom then skips to the top… http://jsfiddle.net/Gfzwp/

If you could help me that would be great, thanks!

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

Add position:absolute to the gallery CSS.

Updated fiddle: http://jsfiddle.net/johnkoer/Gfzwp/5/