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 使其可见

检查 CSS z-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 回答