Question

我想在鼠标悬停时为div设置动画。我只是不知道如何使它淡入/慢慢显示（我认为我们必须使用.animate函数或类似的东西）

$("#logo").mouseover(function() { $("#nav").css('visibility','visible'); });

非常感谢任何帮助：）

Answer 1

$("#logo").mouseover(function() { $("#nav").fadeIn("slow"); });

确保您的css的#nav样式为display:none;

参考http://api.jquery.com/fadeIn/

SAMPLE DEMO

Answer 2

试试这个：

$("#logo").mouseover(function() { 
    $("#nav").fadeIn('slow'); 
});

请参阅网站http://api.jquery.com/fadeIn/

Answer 3

您可以使用fadeIn/fadeOut方法或自动淡入或淡出的fadeToggle方法。每个方法都允许duration参数设置动画时间，但还有更多参数可以修改渐变。

查看fadeToggle的API以查看整个功能（以及如何使用）:)。（fadeIn API，fadeOut API）。

Answer 4

USe fadeIn() ...试试这个。

$("#nav").hide();
$("#logo").mouseover(function() { $("#nav").fadeIn(600));

Answer 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>
<script src="js/jquery-1.7.1.js"></script>
<script>
$(document).ready(function(){
$("#logo").mouseover(function() { $('div:hidden:first').fadeIn('slow', function() {
// Animation complete
alert("complete")
}); });
});

</script>
<style>
#nav{display:none}
</style>
</head>

<body>
<div id="logo">Click Me</div>
<div id="nav" style="background:#CCC">sample</div>
</body>
</html>

在jquery中鼠标悬停时动画div的外观

5 个答案: