jQuery scrollTo and hide an element

Question

According to my last post, I asked how to make a div, which fills the screen, scroll to another div. Which i have hidden, so i had to fade in that element first. That works now. But now i want to make the first div, where ive scrolled from, hidden.

I know the top property of the second div i want to scroll to has been set to 100%, but when i change that back to 0, in my jQuery code, it looks very ugly.

Heres the CSS code fromt he first div i from scrolling FROM:

#fitScreen {
    position: relative;

    height: 100%;
    width: 100%;

    z-index: 0;
    background-color: black;

    overflow: hidden;
}

And here's the CSS code im scrolling to:

#content {
    display: none;
    position: absolute;

    width: 100%;
    height: 100%;

    top: 100%;
}

And heres the JS im using to make it scroll:

$(document).ready(function() {
    $('#exploreBtn').on('click', function() {
        $('#content').fadeIn(500, function() {
            $('html, body').animate({
                scrollTop: $("#content").offset().top
            }, 750);
            //I tried adding these lines, but that did'nt work :(
            $('#fitScreen').delay(500).fadeOut(500); 
            $('#content').delay(500).css('top', '0');
        });
    });
});

Heres a jsFiddle to see the demo:

http://jsfiddle.net/89UdF/1/

Answer 1

try this fiddle

$(document).ready(function() {
    $('#exploreBtn').on('click', function() {
        $('#content').fadeIn(500);
        console.log($("#content").offset().top)
        $('html, body').animate({
            scrollTop: $("#content").offset().top
        }, 1000, function(){
            $("#page1").css('display','none');
            $('#content').css('top',0); 
            $(window).scrollTop(0);       
        });
    });
});