jquery大号渐入渐出效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery大号渐入渐出效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的大号渐入渐出效果的导航菜单</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){ 
	
	$("ul#nav li a").css({"opacity" : 0}).hover(function(){
		$(this).stop().animate({"opacity" : 1}, 200); //Change fade-in speed
	
		}, function(){
		$(this).stop().animate({"opacity" : 0}, 100);//Change fade-out speed
	
	});
	
});
</script>
</head>
<body>
	<div id="page-wrap">
		<div id="content">
            <h2>Nav / Menu Fade</h2>
            <ul id="nav">
              <li class="home"><a href="#">Blog</a></li>
              <li class="about"><a href="#">About</a></li>
              <li class="contact"><a href="#">Contact</a></li>
              <li class="freebies"><a href="#">Freebies</a></li>
            </ul>
		</div>
</div><br />
<br />
</body>
</html>

CSS代码(resets.css):

/*****Reset*****/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
/* remember to define focus styles! */
:focus{outline:0}
/* remember to highlight inserts somehow! */
ins{text-decoration:none}
del{text-decoration:line-through}
a{color:#15adff;text-decoration:none;}
a:hover{text-decoration:underline;}

CSS代码(style.css):

@charset "utf-8";/*Imports*/
@import url("resets.css");/*Always Used*/
body{background:#79694C;}
#page-wrap{margin:0 auto;width:960px;}
h2{color:#fff;font:30px Arial,Helvetica,sans-serif;margin:20px 0 40px 0;}
/*Basic Elements*/
#content{width:960px;position:absolute;top:224px;}
/*Nav / Menu Fade*/
ul#nav li,ul#nav li a{background:url(../images/nav-sprite.png) no-repeat left top;height:67px;width:192px;}
ul#nav li{float:left;border:1px solid #243e3b;border-left:none;}
ul#nav li a{display:block;text-indent:-9999px;}
ul#nav li.home{background-position:-1px -1px;border-left:1px solid #243e3b;}
ul#nav li.about{background-position:-194px -1px;}
ul#nav li.contact{background-position:-387px -1px;}
ul#nav li.freebies{background-position:-580px -1px;}
ul#nav li.home a{background-position:-1px -69px;}
ul#nav li.about a{background-position:-194px -69px;}
ul#nav li.contact a{background-position:-387px -69px;}
ul#nav li.freebies a{background-position:-580px -69px;}

附件:下载该文件资源,减少时间成本(增值服务)