jQuery实现渐变下拉菜单的简单方法
作者:bea
本文实例讲述了jQuery实现渐变下拉菜单的简单方法。分享给大家供大家参考。具体实现方法如下: 代码如下: <script type="text/javascript"> $(function(){ $("#nav li").hover(function(){if(!$(this).children("#nav li ul").is(":animated")){$(this).children("#nav li ul").fadeIn("100");}
本文实例讲述了jQuery实现渐变下拉菜单的简单方法。分享给大家供大家参考。具体实现方法如下:
代码如下:
<script type="text/javascript">
$(function(){
$("#nav li").hover(function(){if(!$(this).children("#nav li ul").is(":animated")){$(this).children("#nav li ul").fadeIn("100");}},function(){$(this).children("#nav li ul").fadeOut("400");});//willin
})
</script>
#nav li {float:left; line-height:2em; margin:5px 0 5px 5px;}
#nav li ul {position:absolute; **display:none;** z-index:9999;width:150px; left:-999em;margin:0; background:#C00;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;box-shadow:0 0 15px #F63;-moz-box-shadow:0 0 15px #F63;-webkit-box-shadow:0 0 15px #F63;}
希望本文所述对大家的jQuery程序设计有所帮助。
有用 | 无用
代码如下:
<script type="text/javascript">
$(function(){
$("#nav li").hover(function(){if(!$(this).children("#nav li ul").is(":animated")){$(this).children("#nav li ul").fadeIn("100");}},function(){$(this).children("#nav li ul").fadeOut("400");});//willin
})
</script>
#nav li {float:left; line-height:2em; margin:5px 0 5px 5px;}
#nav li ul {position:absolute; **display:none;** z-index:9999;width:150px; left:-999em;margin:0; background:#C00;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;box-shadow:0 0 15px #F63;-moz-box-shadow:0 0 15px #F63;-webkit-box-shadow:0 0 15px #F63;}
希望本文所述对大家的jQuery程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- Javascript数据结构与算法之列表详解
- javascript实现 百度翻译 可折叠的分享按钮列表
- 基于jquery实现的自动补全功能
- jquery实现页面百叶窗走马灯式翻滚显示效果的方法
- window.open()实现post传递参数
- js运动动画的八个知识点
- js实现最短的XML格式化工具实例
- 微信中一些常用的js方法汇总
- javascript实现checkBox的全选,反选与赋值
- jQuery通过扩展实现抖动效果的方法
- jQuery实现字符串按指定长度加入特定内容的方法
- jquery利用命名空间移除绑定事件的方法
- jQuery实现带动画效果的二级下拉导航方法
- jquery图形密码实现方法
- jQuery模拟新浪微博首页滚动效果的方法
- jQuery实现在textarea指定位置插入字符或表情的方法
- jQuery实现统计输入文字个数的方法
- jQuery处理json数据返回数组和输出的方法
- jquery实现表格本地排序的方法