这是我的index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="style.css" rel="stylesheet" type="text/css" media="all"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="fade.js"></script> </head>
<body> <div id="wrapper"> <div id="header"></div> <div class="spacer"></div> <div class="nav"> <a> </a> <a href="" class="nav_menu" title="HOME">HOME</a> <a href="" class="nav_menu" title="PORTFOLIO">PORTFOLIO</a> <a href="" class="nav_menu" title="ABOUT ME">ABOUT ME</a> <div class="clearer"></div> </div> </div> </body> </html>
I wanted to fade the navigation menu to an image that I made.
and this is my fade.js that is working.
$(document).ready(function(){
$("a.nav_menu").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
我已经试过了。但它不起作用。
$(function(){
$("a.nav_menu")
.mouseover(function(){
$(this).stop().animate({'background-image':'url(nav_hover.jpg)'},3000);
})
.mouseout(function(){
$(this).stop().animate({'background-image':'url(nav_.jpg)'},3000);
})
});
谁能帮帮我。
最佳答案
看看这篇博文:http://www.bendewey.com/blog/index.php/9/jquery-rollover-image
根据 Daniel Roberts 的回答，该插件类似于他的解决方案#2，我在底部建立一个带有图像的基本链接，然后使用相对定位，将悬停图像放在顶部。当用户将鼠标悬停在链接上时，顶部的悬停图像会从不透明度 0 变为 1，现在根据背景中的图像，这可能看起来不错且无缝，但是，如果您的背景图像具有很大的对比度，结果可能会有有趣的结果。
关于javascript - jQuery 动画/悬停和淡入淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1996320/