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

Answer 2

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

Answer 3

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

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>

车库门效果：在其上升之前隐藏内容

3 个答案: