你的位置:首页 > Java教程

[Java教程]鼠标滑过实现淡入淡出效果代码实例


鼠标滑过实现淡入淡出效果代码实例:
淡入淡出效果应用非常的广泛,可以为一些效果增色不少,当然给用户的印象也就更加深刻,下面就介绍一个使用jquery实现的鼠标悬浮淡入淡出效果,代码如下:

<!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()方法一章节。 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14431

更多内容可以参阅:http://www.softwhy.com/jquery/