javascript - 车库门效果 : hide content beneath before it rises

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

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