滑鼠滑過實現淡入淡出效果程式碼例項
淡入淡出效果應用非常的廣泛,可以為一些效果增色不少,當然給使用者的印象也就更加深刻,下面就介紹一個使用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()一章節。
相關文章
- 滑鼠滑過圖片出現光弧效果程式碼例項
- 滑鼠虛滑過選項卡切換效果程式碼例項
- javascript實現的淡入淡出效果程式碼例項JavaScript
- 滑鼠滑過實現table表格行背景變色程式碼例項
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- 滑鼠懸浮實現翻牌效果程式碼例項
- CSS實現的滑鼠滑過改變連結文字例項程式碼CSS
- javascript淡入淡出效果程式碼例項JavaScript
- js淡入淡出效果例項程式碼JS
- jquery實現的滑動軸效果程式碼例項jQuery
- 滑鼠懸浮實現抖動效果例項程式碼
- 淡入淡出效果簡單程式碼例項
- div的淡入淡出效果程式碼例項
- CSS3滑過光束效果程式碼例項CSSS3
- 滑鼠懸浮文字實現霓虹燈效果程式碼例項
- css3實現滑鼠懸浮劃過光弧效果程式碼例項CSSS3
- js圖片淡入淡出效果程式碼例項JS
- css實現的滑鼠滑過星星高亮效果CSS
- jQuery實現的滑鼠滑過圖片上縮彈出文字說明程式碼例項jQuery
- 圖片滑過亮光光弧效果程式碼例項
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- jQuery實現滑動門程式碼例項jQuery
- 滑鼠懸浮連結出現音效效果程式碼例項
- 滑鼠滑過連結a實現背景變色程式碼
- js左右滑動選項卡效果程式碼例項JS
- 滑鼠懸浮評分效果程式碼例項
- jquery實現的滑動門程式碼例項jQuery
- 滑鼠懸浮出現tips提示框效果程式碼例項
- 根據滑鼠的方位出現遮罩層效果程式碼例項遮罩
- css實現滑鼠滑過切換背景圖片程式碼CSS
- css滑鼠懸浮tips效果程式碼例項CSS
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- css實現矩形切角效果程式碼例項CSS
- jquery實現的選項卡效果例項程式碼jQuery
- 具有淡入淡出效果的下拉導航選單例項程式碼單例
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- jQuery實現的滑鼠滑過連結出現自定義提示效果jQuery