jQuery渐变下拉菜单

这里主要是利目标在鼠标经过时(.悬停())利用滑动切换()、向上滑动()来显示原来隐藏着的内容：复制代码代码如下： $(function(){ $(').下拉菜单')。悬停(函数(){ $('li ul ')).滑动切换(800)；}，function(){$('li ul ').向上滑动(1000)})})

复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlejQuery渐变下来效果/title style type=' text/CSS ' a { text-decoration : none；color : # 333 } a : hover { color : # f33 } a . gr { color : # 227 ce 8；} a . XG { color : # f30 } a . zx { color : # 690 } a . yd { color : # f00 } a . more-RSS { color : # f60；} a img { border:none} a . RSS提要{ display :块；高度：60 px宽度宽度width:160pxcursor:pointer指针指针；} .包装{ width :700 pxmargin :0 auto高度：460 px位置：相对；} .包装小{ position:absolute绝对值底部：0;左侧：0边框-顶部：1px虚线# b3b 3；显示：块；宽度宽度：700像素线高：30 px向右文本对齐：} ul Li {列表式：无；} ul李。下拉{位置：相对；宽度宽度：160像素Li。下拉ul {显示：无；文本对齐：居中；背景# fffborder:1px实心# ddd宽度宽度：160 pxpadding :15 px 15px 20px } ul Li。下拉ul Li { padd :5 px 0；边框-底部：1px虚线# DDD }/style/head body div class=' wrapper ' h1a href=' jQuery渐变下拉菜单/a/h1 p使用滑动切换和向上滑动来实现。当然，也可以使用隐藏/显示，淡入/淡出等来实现，只是效果不同，实现的方法还是相同的。需要注意的是，要给。下拉式加上位置：相对；防止闪烁/p ul class=' fir ' Li class='下拉' a class=' RSS Feed ' img src=' http : Feed me。png ' alt=' Feed me '/a ul lia href=' # ' rel=' RSS ' img src=' http : RSS。gif ' alt=' RSS Feed '/a/Li lia href=' # ' class=' XG ' rel=' no follow '鲜果订阅/a/Li lia href=' # ' class=' gr ' rel=' no follow ' Google订阅/a/Li lia href=' # ' class=' zx ' rel=' no follow '抓虾订阅/a/Li lia class=' yd ' rel=' no follow '有道订阅/a/Li lia href=' # ' class=' more-RSS ' rel=' RSS '更多方式/a/li /ul /li /ul /div脚本语言=' JAVAScript ' type=' text/JAVAScript ' src=' http : jquery。 量滴js /脚本语言=' JavaScript '类型=' text/JavaScript ' $(function(){ $().冷杉。下拉菜单')。悬停(函数(){ $('li ul ')).滑动切换(800)；}，function(){ $('li ul ').向上滑动(1000)})})/脚本/正文/html测试代码打包下载