2011

Jan

12

jQuery显示与隐藏div的特效
文章分类:XHTML相关

项目中用js改变样式就像平时吃饭喝水一样不可缺少,隐藏与显示div更是使用频繁,你会不会经常对突然显示与隐藏而不满意呢?来看看下面这段代码:

JavaScript代码
  1. /* 
  2.  *显示 
  3.  *.show(speed, [callback]);以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。有speed参数和可选callback参数,speed表示显示的时间毫秒,后面的是可选函数. 
  4.  *$("#www").show(1000,function(){alert("回调函数");});这样1秒后第一个层显示全部,然后弹出"回调函数" 对话框.speed,三种预定速度之一的字符串("slow", "normal", or "fast")分别是600ms,400ms和200ms 
  5. */  
  6. function show(){  
  7.     $("#divObj").show();  
  8. }  
  9.   
  10. /*.hide(speed, [callback]);以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数,参考上面的*/  
  11. function hiden(){  
  12.     $("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast  
  13. }  
  14.   
  15. function fadeIn(){  
  16.     $("#divObj").fadeIn(2000);//淡入,参数可以无,参数说明同上  
  17. }  
  18. function fadeOut(){  
  19.     $("#divObj").fadeOut(2000);//淡出,参数可以无,参数说明同上  
  20. }  
  21.   
  22. /*.slideDown(speed, [callback]);窗帘效果展开;通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。回调函数是可选的,speed也有上面的三种预定速度,也可以是数值.*/  
  23. function slideDown(){  
  24.     $("#divObj").slideDown();  
  25. }  
  26.   
  27. /*.slideUp(speed, [callback]);窗帘效果折叠;通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数 同上不过是用来隐藏的*/  
  28. function slideUp(){  
  29.     $("#divObj").slideUp();  
  30. }  
  31.   
  32. /* 
  33.  *窗帘效果的切换,参数可以无,参数说明同上,如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 
  34.  *toggle(speed, [callback]);一样的多了speed和callback函数.跟toogle()一样,不过多了时间和回调函数 
  35. */  
  36. function slideToggle(){  
  37.     $("#divObj").slideToggle(2000);  
  38. }  
  39.   
  40. /* 
  41.  *显示隐藏切换,参数可以无,参数说明同上; 
  42.  *.toggle(switch);根据switch参数切换元素的可见状态(ture为可见,false为隐藏)。switch可以用function()返回函数决定 
  43.  *.slideToggle(speed, [callback]);设置时间来通过高度变化,切换触发显示隐藏.参数同上. 
  44. */  
  45. function toggle(){  
  46.     $("#divObj").toggle(2000);  
  47. }  
XML/HTML代码
  1. <h3>div里内容的显示隐藏特效</h3>  
  2. <input type="button" value="显示" onclick="show()"/>  
  3. <input type="button" value="隐藏" onclick="hiden()"/>  
  4. <input type="button" value="淡入" onclick="fadeIn()"/>  
  5. <input type="button" value="淡出" onclick="fadeOut()"/>  
  6. <input type="button" value="窗帘效果展开" onclick="slideDown()"/>  
  7. <input type="button" value="窗帘效果折叠" onclick="slideUp()"/>  
  8. <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>  
  9. <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>  
  10. <div id="divObj" style="display:none">  
  11.     1.测试例子<br/>  
  12.     2.测试例子<br/>  
  13.     3.测试例子<br/>  
  14.     4.测试例子<br/>  
  15.     5.测试例子<br/>  
  16.     6.测试例子<br/>  
  17.     7.测试例子<br/>  
  18.     8.测试例子<br/>  
  19.     9.测试例子<br/>  
  20.     0.测试例子<br/>  
  21. </div>  

不多说,点击此处查看演示!

本站原创,转载请标明:来自追梦博客(http://www.wuleilei.com/)

本文地址:http://www.wuleilei.com/Blog/240

相关文章

IE6中弹出层遮不住select的解决方法 (2009-08-31)

jQuery“没有权限”的解决方法 (2010-05-05)

javaScript与jquery实现锚点平滑移动 (2010-12-30)

20个最新的jQuery效果. (2011-01-20)

jQuery滑动图片效果 (2011-01-27)

实用的jQuery表格样式(隔行换色和鼠标经过高亮并显示隐藏内容) (2011-02-17)

一个很不错的jQuery弹出窗口插件Facebox (2011-03-04)

jQuery实现自定义select样式 (2011-06-23)

jQuery EasyDrag轻松实现DIV的拖动 (2011-07-15)

给Adobe Dreamweaver CS5安装jQuery语法提示插件 (2010-10-11)

看看他们的脚印

闲言碎语

回归原始,爱设计,爱apple。 (5月18日)

速度通知啊! (5月17日)

又是一个三岔口,即将迈出的这一步对吗? (5月16日)

文章分类

最近文章

显示 Mac OS X 10.7 Li...

iOS开发之int,NSInteger...

iOS开发之使用UIGestureRe...

iOS开发之使用lipo命令制作模拟器...

iOS开发之KVO的使用

最近评论

日志归档

友情链接

其它功能

随机标签