我有一个 .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() 但很遗憾，因为它是一张图片，所以看起来不够好。
谢谢!
最佳答案
这是一个 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;
}
});
});
关于css - 元素从标题后面掉落，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14084997/