jQuery scrollTo和隐藏一个元素 [英] jQuery scrollTo and hide an element

问题描述

根据我最后一篇文章，我问如何做一个div，它填充屏幕，滚动到另一个div。我隐藏了，所以我不得不淡入的元素第一。现在工作。但现在我想制作第一个div，其中ive滚动，隐藏。

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.

我知道第二个div的top属性已经设置为100％，但是当我把它改回0时，在我的jQuery代码中，它看起来很丑陋。

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.

从第一个div i滚动FROM：

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;
}

这里是CSS代码im滚动到：

And here's the CSS code im scrolling to:

#content {
    display: none;
    position: absolute;

    width: 100%;
    height: 100%;

    top: 100%;
}

并且使用JS im使它滚动：

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');
        });
    });
});

使用jsFiddle查看演示：

Heres a jsFiddle to see the demo:

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

推荐答案

请尝试此 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);       
        });
    });
});

这篇关于jQuery scrollTo和隐藏一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！