这里主要是利目标在鼠标经过时（.hover()）利用slideToggle() 、slideUp()来显示原来隐藏着的内容： 复制代码 代码如下: $(function(){ $(".dropdown").hover( function(){ $("li ul").slideToggle(800);}, function(){$("li ul").slideUp(1000)} ) }) 复制代码 代码如下: jQuery 渐变下来效果 <BR>a{text-decoration:none;color:#333;} <BR>a:hover{color:#f33;} <BR>a.gr{color:#227CE8;} <BR>a.xg{color:#f30;} <BR>a.zx{color:#690;} <BR>a.yd{color:#f00;} <BR>a.more-rss{color:#f60;} <BR>a img{border:none;} <BR>a.rssfeed{display:block;height:60px;width:160px;cursor:pointer;} <BR>.wrapper{width:700px;margin:0 auto;height:460px;position:relative;} <BR>.wrapper small{position:absolute;bottom:0;left:0;border-top:1px dotted #b3b3b3;display:block;width:700px;line-height:30px;text-align:right;} <BR>ul li{list-style:none;} <BR>ul li.dropdown{position:relative;width:160px;} <BR>ul li.dropdown ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:160px;padding:15px 15px 20px;} <BR>ul li.dropdown ul li{padding:5px 0;border-bottom:1px dotted #ddd;} <BR> jQuery 渐变下拉菜单 使用slideToggle和slideUp来实现.当然,也可以使用hide/show, fadeIn/fadeOut等来实现,只是效果不同,实现的方法还是相同的.需要注意的是,要给.dropdown加上position:relative;防止闪烁. 鲜果订阅 Google订阅 抓虾订阅 有道订阅 更多方式 » <BR>$(function(){ <BR> $(".fir .dropdown").hover( <BR> function(){ <BR> $("li ul").slideToggle(800); <BR> },function(){ <BR> $("li ul").slideUp(1000) <BR> }) <BR>}) <BR> 测试代码打包下载
