javascript - 车库门效应：在它升起之前将内容隐藏在下面

Question

我正在尝试产生车库门效果，当网站加载时，您会看到车库门。悬停时，门抬起，内容在其后面。我遇到的问题是让我的内容一直隐藏，直到门打开。任何想法，将不胜感激。看看这个网站：http: //vcube.netau.net/

如果需要代码，我可以提供给。

<div id="wrapper">
    <div id="container">
        <img src="./images/Logo_door.png" class="top">

        <section id="main">
        <!-- main content here -->
        </section>

        <footer id="footer">
        <!-- where video and map will go -->
            <div id="video">
                <iframe class="hidden" width="363" height="187" src="http://www.youtube.com/embed/Pd00CAw15-E?wmode=transparent" frameborder="0" allowfullscreen></iframe>
            </div>
            <div id="map">
            </div>
        </footer>
    </div>  
</div>

这是他的CSS

body {
    background:url('../images/background1.jpg');
    background-repeat:repeat-y repeat-x;
    }

#wrapper {
    background:url('../images/background2.gif');
    display:block;
    height:600px;
    width:900px;
    padding:10px 0 10px 0;
    margin:auto;
    border-radius:15px;
    }

footer {
    margin:auto;
    width:800px;
    height:200px;
    }

#main {
    height:350px;
    margin:0px 50px 50px 50px;
    width:800px;
    border-radius:15px;
    padding:0;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
    }

#video {
    background:black;
    padding:0;
    margin:0px 0px 0px 25px;
    float:right;
    width:375px;
    height:200px;
    border-radius:10px;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
    }

#video iframe {
    margin:6px 0 0 6px;
    }

#map {
    padding:0;
    margin:0px 25px 0px 0px;
    border-radius:10px;
    float:left;
    width:375px;
    height: 200px;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
    }

.top {
    margin:auto;
    height:700px;
    width:900px;
    padding:0;
    position:absolute;
    }

还有我正在使用的 jquery。

$(function() {

    $('#wrapper').hover(function() {
    $('img.top', $(this)).stop().animate({top: '-900px'}, 1000); 
        },function() {
    $('img.top', $(this)).stop().animate({top: '10px'}, 1000);
    })
});

Answer 1

嘿，这是在动画完成时让你的主出现的代码

jQuery部分

  $(function() {

    $('#wrapper').hover(function() {
    $('img.top', $(this)).stop().animate({top: '-900px'}, 1000 , function(){$('.hidden').css('display' , 'block');}); 
        },function() {
        $('.hidden').css('display' , 'none');
    $('img.top', $(this)).stop().animate({top: '10px'}, 1000);
    })
});

CSS部分

body {
    background:url('../images/background1.jpg');
    background-repeat:repeat-y repeat-x;
    }

#wrapper {
    background:url('../images/background2.gif');
    display:block;
    height:600px;
    width:900px;
    padding:10px 0 10px 0;
    margin:auto;
    border-radius:15px;
    }

footer {
    margin:auto;
    width:800px;
    height:200px;
    }

#main {
    height:350px;
    margin:0px 50px 50px 50px;
    width:800px;
    border-radius:15px;
    padding:0;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
    }

#video {
    background:black;
    padding:0;
    margin:0px 0px 0px 25px;
    float:right;
    width:375px;
    height:200px;
    border-radius:10px;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
    }

#video iframe {
    margin:6px 0 0 6px;
    }

#map {
    padding:0;
    margin:0px 25px 0px 0px;
    border-radius:10px;
    float:left;
    width:375px;
    height: 200px;
    -moz-box-shadow:  inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow:  inset 0 0 5px 5px #888;
    }

.top {
    margin:auto;
    height:700px;
    width:900px;
    padding:0;
    position:absolute;
    }
.hidden{
    display : none;
}

我还修复了 HTML 部分的嵌入问题

<div id="wrapper">
    <div id="container">
        <img src="./images/Logo_door.png" class="top">

        <section id="main" class="hidden">
        <!-- main content here -->
        </section>

        <footer id="footer" class="hidden">
        <!-- where video and map will go -->
            <div id="video">
                <iframe class="hidden" width="363" height="187" src="http://www.youtube.com/embed/Pd00CAw15-E?wmode=transparent" frameborder="0" allowfullscreen></iframe>
            </div>
            <div id="map">
            </div>
        </footer>
    </div>  
</div>

Answer 2

将初始不透明度设置opacity: 0为要在初始页面加载中隐藏的内容，然后将其更改为何opacity: 1时document.ready或被window.ready调用。

Answer 3

通常我不喜欢给出一个句子的答案... http://api.jquery.com/slideToggle/