gpt4 book ai didi

javascript - jQuery 动画/悬停和淡入淡出

转载 作者:行者123 更新时间:2023-11-30 18:56:15 25 4
gpt4 key购买 nike

这是我的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>&nbsp;</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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com