<![CDATA[刘新修]]> http://pic1.liuxinxiu.com:80/index.php zh-cn http://pic1.liuxinxiu.com:80/jquery_tooltip/ <![CDATA[一个简单的jQuery信息提示效果]]> 刘新修 <admin@yourname.com> Sat, 18 May 2013 15:23:37 +0000 http://pic1.liuxinxiu.com:80/jquery_tooltip/ jQuery信息提示(jQuery Tooltip)效果可以很好的提升用户体验，在web developer中也经日趋频繁，下面是一个简单的jQuery息提示效果实例演示。

首先加载jQuery库文件：

JavaScript代码
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  

下面是jQuery核心代码：

JavaScript代码
  1. $(document).ready(function () {  
  2.     $(".menu a").hover(function () {  
  3.         $(this).next("em").animate({  
  4.             opacity: "show",  
  5.             top: "-75"  
  6.         }, "slow");  
  7.     }, function () {  
  8.         $(this).next("em").animate({  
  9.             opacity: "hide",  
  10.             top: "-85"  
  11.         }, "fast");  
  12.     });  
  13. });  

HTML代码如下：

XML/HTML代码
  1. <ul>  
  2.   <li><a href="#">…</a><em style="top: -85px; display: none;">…</em></li>  
  3.   <li><a href="#">…</a><em style="top: -85px; display: none;">…</em></li>  
  4.   <li><a href="#">…</a><em style="top: -85px; display: none;">…</em></li>  
  5. </ul>  

 


Tags - , , , , ]]> http://pic1.liuxinxiu.com:80/jquery_tooltip/#blogcomment <![CDATA[[评论] 一个简单的jQuery信息提示效果]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://pic1.liuxinxiu.com:80/jquery_tooltip/#blogcomment