2

サイトが読み込まれるとガレージドアが表示されるガレージドア効果を持たせようとしています。ホバーすると、ドアが持ち上がり、コンテンツがその後ろにあります。私が抱えている問題は、ドアが上がるまでコンテンツを隠したままにすることです. どんなアイデアでも大歓迎です。サイトをご覧ください: 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);
    })
});
4

3 に答える 3

0

ねえ、これはアニメーションが完了したときにメインを表示するコードです

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>
于 2012-10-19T03:03:59.217 に答える
0

最初のページ ロードで非表示にするコンテンツの初期不透明度を に設定し、opacity: 0それをopacity: 1whendocument.readyまたはwindow.readyが呼び出されたときに変更します。

于 2012-10-19T02:12:56.487 に答える
0

通常、私は一文の答えを与えるのは好きではありません... http://api.jquery.com/slideToggle/

于 2012-10-19T02:23:57.420 に答える