0

.pngのバナーがあり、クリックした後、ヘッダーの後ろから下に移動したいと思います。これは私が試したものですが、この場合のdivは元の位置に戻ります。ヘッダーの後ろ（非表示）に配置し、遷移後、その位置を維持する必要があります。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s;

-webkit-animation:myfirst 5s linear 2s;

}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
100%  {background:green; left:0px; top:200px;}
}


@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
100%  {background:green; left:0px; top:200px;}
}

</style>
</head>
<body>


 <div></div>

 </body>
 </html>

jQueryのslideDown（）も試してみましたが、残念ながら画像なので見栄えがよくありません。

ありがとう！

4

2 に答える 2

1

z-indexプロパティを使用できます

@keyframes myfirst{  position:absolute; z-index:-1; }

z-index：1を使用して表示します

CSSz-indexプロパティを確認してください

于 2012-12-29T19:14:34.283 に答える
1

これはjQueryソリューションであり、誰かがもっとエレガントなソリューションを思い付くかもしれませんが、試してみてください。これがあなたが求めている行動であることを願っています。

jsFiddle： http: //jsfiddle.net/fabio_silva/Qhrnd/

HTML

<div id="header">header</div>
<div id="banner">banner</div>

</ p>

CSS

div#header
{
    background: #abc;        
    width: 500px;
    height: 100px;
    position: relative;
    z-index: 1;
}
div#banner
{
    width: 500px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: url('http://jsfiddle.net/img/logo.png') no-repeat 50% 50%;
    background-color: #345;
}​

</ p>

Javascript / jQuery

var hidden = true;
$(document).ready(function () {
    $("#header").click(function () {
        if (hidden)
        {
            $("#banner").animate({
                top: '+=100',
                display: 'block' //updated

            }, 500);
            hidden=false;
        }
        else
        {
            $("#banner").animate({
                top: '-=100'
                display: 'none' //updated
            }, 500);
            hidden=true;
        }

    });
});​
于 2012-12-29T19:42:11.707 に答える