注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery实现淡入淡出效果的导航菜单特效

菜单 fishcity 1403浏览

这是一个jquery实现的既简单又实用的淡放淡出导航菜单效果,短短的6行代码就可以完成全部效果,不得不说jquery的强大,实现的原理也非常容易理解,当鼠标悬浮时把图层在一定时间内从透明变成不透明,反之当鼠标离开时把层图在一定时间从不透明变成透明。下面来看下它的使用方法吧。

首先引入核心文件jquery

<script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>

写上html

 <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>

写入CSS

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;
}

写入JS

$(function(){ 
	$("ul#nav li a").css({"opacity" : 0}).hover(function(){
		$(this).stop().animate({"opacity" : 1}, 200); 
	
		}, function(){
		$(this).stop().animate({"opacity" : 0}, 100);
	});
	
});

转载请注明:jQ酷 » jQuery实现淡入淡出效果的导航菜单特效

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。