jQuery實現(xiàn)漸變下拉菜單的簡單方法
更新時間：2015年03月11日 12:03:42 作者：sunyiqi
這篇文章主要介紹了jQuery實現(xiàn)漸變下拉菜單的簡單方法,涉及jQuery鏈式操作及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)漸變下拉菜單的簡單方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<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;}
$(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程序設計有所幫助。
相關文章
詳解有關easyUI的拖動操作中droppable，draggable用法例子
本篇文章主要介紹了有關easyUI的拖動操作中droppable，draggable用法例子，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
此筆記只是作為本人學習JQuery的隨手筆記,稍微做了一下整理,希望對新人有參考價值。2009-05-05
這篇文章主要介紹了jQuery中get方法用法,結合實例形式分析了jQuery的ajax交互中get方法的功能、參數(shù)、使用方法與相關注意事項,需要的朋友可以參考下2016-12-12
jQuery調用RESTful WCF示例代碼(GET方法/POST方法)
本篇文章主要介紹了jQuery調用RESTful WCF示例代碼(GET方法/POST方法)，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
jquery.boxy插件的iframe擴展2010-07-07
這篇文章主要介紹了到底該拋不拋棄JQuery，對JS框架感興趣的同學，可以參考下2021-05-05
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過預覽圖片大圖效果的方法,涉及jQuery鼠標事件響應及頁面元素屬性動態(tài)操作相關技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了jQuery實現(xiàn)的仿百度分頁足跡效果代碼,采用jQuery針對奇偶數(shù)不同的頁碼設置不同的樣式,非常簡單實用,需要的朋友可以參考下2015-10-10
本文主要介紹了jQuery兩種方法寫選項卡的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)
本篇文章主要介紹了JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03