|
|
51CTO旗下网站
|
|
移动端

jQuery两个有意思的切换方法

话说,JQuery中toggle这是一个好玩意,用于绑定多个事件处理器函数,以响应被选元素的轮流click事件。如果元素是可见的,切换为隐藏。如果元素是隐藏的,切换为可见。

作者:飞舞轻扬在台北来源:飞舞轻扬在台北的博客|2012-05-22 10:12

hover:

hover是一个自定义方法,描述的是,状态一,状态二,鼠标滑动而触发。效果与onmousemove onmouseout类似。对于这种状态,用一个小例子来描述,其实,在复杂的动画富web应用中,hover的作用很广泛。在function(){},function(){}这两个回调函数中,足以让我们发挥丰富的扩展。

.hover(function(){..},function(){..});

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" > 
  3. <head> 
  4.     <title>Untitled Page</title> 
  5.     <style type="text/css"> 
  6.         #de{}  
  7.     </style> 
  8.     <script type="text/javascript" src="jquery-1.6.4.min.js"></script> 
  9.     <script type="text/javascript"> 
  10.         $(function () {  
  11.             var $de = $("#de");  
  12.             $de.hover(function () { $(this).css("background", "#ccc"); }, function () { $(this).css("background","#999"); });  
  13.         });  
  14.     </script> 
  15. </head> 
  16. <body> 
  17.     <a href="#" id="de">content</a> 
  18. </body> 
  19. </html> 

toggle:

话说,JQuery中toggle这是一个好玩意,用于绑定多个事件处理器函数,以响应被选元素的轮流click事件。如果元素是可见的,切换为隐藏。如果元素是隐藏的,切换为可见。

.toggle(function(){},function(){},....);.toggle(speed,function(){}); .toggle(speed,easing,function(){});

speed:显示与隐藏的速度,默认是0。

easing:指定切换效果,默认是swing,可选linear。

.toggle()方法还有一种以switch参数的形式,比如我设置一个参数为int,$("..").toggle(int)。它的类似效果,可以如下:

int ? $("..").show() : $("..").hide();

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" > 
  3. <head> 
  4.     <title>Untitled Page</title> 
  5.     <style type="text/css"> 
  6.         #de{}  
  7.         .de{ background:#ccc; width:50px; height:50px; margin-top:50px; display:none;}  
  8.     </style> 
  9.     <script type="text/javascript" src="jquery-1.6.4.min.js"></script> 
  10.     <script type="text/javascript"> 
  11.         $(function () {  
  12.             var $de = $("#de");  
  13.             $de.toggle(function () { $(".de").fadeIn("slow"); }, function () { $(".de").fadeOut("slow"); });  
  14.         });  
  15.     </script> 
  16. </head> 
  17. <body> 
  18.     <a href="#" id="de">content</a> 
  19.     <div class="de"></div> 
  20. </body> 
  21. </html> 

原文链接:http://www.cnblogs.com/xiangwenwen/archive/2012/05/15/2501941.html

【编辑推荐】

  1. jQuery插件之Ajax自动完成
  2. jQuery基本事件代码优化
  3. 印象深刻的jQuery手风琴效果应用
  4. jQuery可多次使用的星级插件
  5. JQuery插件的开发真的有那么难吗
【责任编辑:张伟 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

鸟哥的Linux私房菜——服务器架设篇(第二版)

本书是对连续三年蝉联畅销书排行榜前10名的《Linux鸟哥私房菜——服务器架设篇》的升级版,新版本根据目前服务器与网络环境做了大幅度修订...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊