滑鼠滑過實現淡入淡出效果程式碼例項
淡入淡出效果應用非常的廣泛,可以為一些效果增色不少,當然給使用者的印象也就更加深刻,下面就介紹一個使用jquery實現的滑鼠懸浮淡入淡出效果,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } ul{ list-style:none; width:150px; } .nav ul{display:none} </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".nav").hover(function(){ $(this).find("ul").stop().fadeIn(); },function(){ $(this).find("ul").stop().fadeOut(); }); }) </script> </head> <body> <ul style="margin:100px;"> <li class="nav"> <a href="#">螞蟻部落</a> <ul> <li>div css教程</li> <li>javascript教程</li> <li>jquery教程</li> <li>運營交流</li> </ul> </li> </ul> </body> </html>
上面的程式碼實現了淡入淡出效果,也是一個簡單的二級下拉選單的功能的節選,下面介紹一下它的實現過程。
一.程式碼註釋:
1.$(document).ready(function(){}),當文件結構完全載入完畢再去執行函式中的程式碼。
2.$(".nav").hover(),為class屬性值為nav的元素註冊事件處理函式。
3.$(this).find("ul").stop().fadeIn(),實現淡入效果。
4.$(this).find("ul").stop().fadeOut(),實現淡出效果。
二.相關閱讀:
1.hover()可以參閱jQuery hover 事件一章節。
2.find()函式可以參閱jQuery find()一章節。
3.stop()函式可以參閱jQuery stop()函式用法簡單介紹一章節。
4.fadeIn()函式可以參閱jQuery fadeIn()一章節。
5.fadeOut()函式可以參閱jQuery fadeOut()一章節。
相關文章
- 淡入淡出效果簡單程式碼例項
- CSS3滑過光束效果程式碼例項CSSS3
- html實現簡單ListViews效果的例項程式碼HTMLView
- jQuery 實現淡入淡出效果jQuery
- 實現元素的淡入淡出效果
- jQuery tab選項卡效果程式碼例項jQuery
- canvas載入效果程式碼例項Canvas
- CSS橢圓效果程式碼例項CSS
- 美化滾動條效果程式碼例項
- canvas原型鐘錶效果程式碼例項Canvas原型
- css3水滴效果程式碼例項CSSS3
- css背景虛化效果程式碼例項CSS
- canvas氣泡上浮效果程式碼例項Canvas
- jQuery點選滑出層效果程式碼例項jQuery
- css3晃動效果程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- div前後翻轉效果程式碼例項
- 當前文字框高亮效果程式碼例項
- CSS3旋轉效果程式碼例項CSSS3
- canvas繪製箭頭效果程式碼例項Canvas
- 小程式 — 實現左滑刪除效果(列表)③
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- CSS3小黃人效果程式碼例項CSSS3
- css3折角效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- CSS3星系運動效果程式碼例項CSSS3
- vuejs實現新增tag標籤程式碼例項VueJS
- 例項程式碼分享Python實現Linux監控PythonLinux
- 小例項: 用vue實現手風琴效果Vue
- 微信小程式實現卡片左右滑動效果微信小程式
- 商品搶購倒數計時效果程式碼例項
- CSS3文字凹凸效果程式碼例項CSSS3
- MyCat分片:水平拆分例項解析和程式碼實現!
- uni-app 實現滑動列表(slider)頁面效果 完整程式碼示例APPIDE
- jQuery實現的表格展開伸縮效果例項jQuery
- CSS3文字陰影效果程式碼例項CSSS3
- 正則實現個位數補零程式碼例項
- jQuery 效果 – 淡入淡出jQuery