juqery 点击显示点击隐藏，slideDown slideUp slideToggle

Posted on 2015-06-20 22:43  小蕊同学  阅读(802)  评论(0)    收藏  举报 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>webrx-title</title>
  7. <script src="js/jquery-1.11.2.min.js"></script>
  8. <style>
  9. #ad{
  10. 	width:200px;
  11. 	height:300px;
  12. 	background-color:green;
  13. }
  15. </style>
  17. </head>
  19. <body>
  20. <input type="button" value="slideDown" onClick="$('#ad').slideDown('fast')" >
  21. <input type="button" value="slideUp" onClick="$('#ad').slideUp('fast')">
  22. <input type="button" value="slideToggle" onClick="$('#ad').slideToggle('fast')">
  24. <div id="ad"></div>
  25. </body>
  26. </html>
注意引入的jquery一定要正确
slideToggle   点击关闭再点展开
slideUp        点击合上
slideDown      点击展开

mybtn 的控制点击显示点击隐藏
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>webrx-title</title>
  6. <script src="js/jquery-1.11.2.min.js"></script>
  7. <style>
  8. #ad{
  9. 	width:200px;
  10. 	height:300px;
  11. 	background-color:green;
  12. }
  13. </style>
  14. <script>
  15. $(document).ready(function(e) {
  16.     $('input[value=mybtn]').click(function(){
  17. 		var o=$('#ad');
  18. 		o.is(':hidden') ? o.slideDown('fast') : o.slideUp('slow'); 
  19. 	});
  20. });
  22. </script>
  23. </head>
  24. <body>
  25. <input type="button" value="mybtn">
  26. <div id="ad"></div>
  27. </body>
  28. </html>
fadein fadeout 控制显示隐藏
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>webrx-title</title>
  6. <script src="js/jquery-1.11.2.min.js"></script>
  7. <style>
  8. #ad{
  9. 	width:200px;
  10. 	height:300px;
  11. 	background-color:green;
  12. }
  14. </style>
  15. <script>
  16. $(document).ready(function(e) {
  17.     $('input[value=mybtn]').click(function(){
  18. 		var o=$('#ad');
  19. 		//(o.is(':hidden') ? o.slideDown('slow') : o.slideUp('slow') )
  20. 		(o.is(':hidden') ? o.fadeIn('slow') : o.fadeOut('slow') )
  21. 	});
  22. });
  24. </script>
  25. </head>
  26. <body>
  27. <input type="button" value="fadeIn" onClick="$('#ad').fadeIn('fast')" >
  28. <input type="button" value="fadeOut" onClick="$('#ad').fadeOut('fast')">
  29. <input type="button" value="fadeTo" onClick="$('#ad').fadeToggle('fast')">
  30. <input type="button" value="mybtn">
  31. <div id="ad"></div>
  32. </body>
  33. </html>
注意slideUp和fadeIn
显示和隐藏的效果不同






博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3