不会的要多查多问,不然不会的永远不会,哪怕你离会就差了那么一点点
第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]

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>  

 

jQuery动画回调函数

[不指定 2013/05/18 23:14 | by 刘新修 ]

在上一篇文章中,如果想在最后一步切换元素的CSS样式,而不是隐藏元素:

css("border","solid 5px blue");

如果知识按照常规的方式,将fadeOut(“slow”)改为css(“border”,”solid 5px blue”),并不能达到预期的效果。预期效果是在动画的最后一步改变元素的样式,而实际的效果是,刚开始执行动哈ude时候,css()方法就被执行过了。

出现这个问题的原因是css()方法并不会加入到动画队列中,而是立即执行。可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。代码如下:

JavaScript代码
  1. $(function () {  
  2.     $("#panel").click(function () {  
  3.         $(this).animate({  
  4.             left: "400px",  
  5.             height: "200px",  
  6.             opacity: "1"  
  7.         }, 3000).animate({  
  8.             top: "200px",  
  9.             width: "200px"  
  10.         }, 3000, function () {  
  11.             $(this).css("border", "5px solid blue");  
  12.         })  
  13.     });  
  14. });  

这样以来,css()方法就加入到动画队列中了,从而满足了上文提出的需求。

 

第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]