Question

我有一个横幅作为.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（）但遗憾的是因为它是一个图像看起来不够好。

谢谢！

Answer 1

您可以使用 z-index属性

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

使用z-index：1来显示

检查CSS z-index属性

Answer 2

这是一个jQuery解决方案，也许有人可以想出一个更优雅的解决方案，但试一试。我希望这是你所追求的行为。

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

的 HTML 的

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

的 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; }

的使用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; } }); });

元素从标题后面掉落

2 个答案: