首页 > 语言 > JavaScript > 正文

jQuery使用slideUp方法实现控制元素缓慢收起

2024-05-06 16:17:39
字体:
来源:转载
供稿:网友

这篇文章主要介绍了jQuery使用slideUp方法实现控制元素缓慢收起的功能,实例分析了jQuery中slideUp方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery使用slideUp方法实现控制元素缓慢收起功能的技巧。分享给大家供大家参考。具体实现方法如下:

 

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <script src="js/jquery.min.js"
  5. </script> 
  6. <script> 
  7. $(document).ready(function(){ 
  8. $("#flip").click(function(){ 
  9. $("#panel").slideUp("slow"); 
  10. }); 
  11. }); 
  12. </script> 
  13. <style type="text/css"
  14. #panel,#flip 
  15. padding:5px; 
  16. text-align:center; 
  17. background-color:#e5eecc; 
  18. border:solid 1px #c3c3c3; 
  19. #panel 
  20. padding:50px; 
  21. </style> 
  22. </head> 
  23. <body> 
  24. <div id="flip">Click to slide up panel</div> 
  25. <div id="panel">Hello world!</div> 
  26. </body> 
  27. </html> 

希望本文所述对大家的jQuery程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选