我试图将一个 div 放在另一个之上，并将顶部 div 的不透明度设置为 0。悬停时，jquery 将通过将顶部 div 的不透明度设置为 1 并增加宽度和高度来覆盖底部 div 来制作动画.
现在的问题是我的动画功能没有被触发。请解释我在代码中犯了什么错误。下面是我的代码示例。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function over(ele)
{
$("#"+ele).animate(function()
{
opacity:1,
width:"300px",
height:"300px",
},2000);
}
</script>
<style>
#container{
width:300px;
height: 300px;
position: relative;
background-color: brown;
}
#bot{
width:300px;
height:300px;
float:left;
position: absolute;
display: inline-block;
background-color: teal;
}
#top{
width: 100px;
height:100px;
margin: 0 auto;
background-color: gold;
opacity: 0;
z-index:100;
}
</style>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
</head>
<body>
<article id="container"><ul>
<li id="bot">Maclean
<div id="top" onmouseover="over(this.id);">Pinto </div>
</li>
</ul>
</article>
</body>
</html>
最佳答案
尝试这样的事情
$("#"+ele).animate(
{
opacity:1,
width:"300",
height:"300",
},2000);
引用
http://api.jquery.com/animate/
例子
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
关于javascript - 使用 jquery 设置不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19972093/