jquery动画

Posted on 2015-06-18 00:31  小蕊同学  阅读(182)  评论(0)    收藏  举报
<a href="javascript:void(0)" id="show">show</a>
javascript:void(0) 防止页面单击以后会跳走，让他为空
jquery 动画库下载地址

<script src="js/jquery.easing.1.3.js"></script>
引入即可使用
此网站查看动画效果

点击显示就显示，点击隐藏就隐藏
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  8. #ad{
  9. 	width:300px;
  10. 	height:300px;
  11. 	background-color:red;
  12. }
  13. </style>
  14. <script src="js/jquery-1.11.2.min.js"></script>
  15. <script src="js/jquery.easing.1.3.js"></script>
  16. <script>
  17. $(document).ready(function(e){
  18.  $('#show').click(function(){
  19. 	 $('#ad').show('easeInQuint');
  20. 	 });
  21. 	  $('#hide').click(function(){
  22. 	 $('#ad').hide(4000);
  23. 	 });
  24. });
  25. </script>
  26. </head>
  27. <body>
  28. <a href="javascript:void(0)" id="show">show</a>
  29. <a href="javascript:void(0)" id="hide">hide</a>
  30. <div id="ad"></div>
  31. </body>
  32. </html>
同一个按钮点击显示，点击隐藏
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  8. #ad{
  9. 	width:300px;
  10. 	height:300px;
  11. 	background-color:red;
  12. }
  13. </style>
  14. <script src="js/jquery-1.11.2.min.js"></script>
  15. <script src="js/jquery.easing.1.3.js"></script>
  16. <script>
  17. $(document).ready(function(e){
  18. 	$('#btn').click(function(){
  19. 		$('#ad').is(':hidden') ? $('#ad').show('slow') : $('#ad').hide(); 
  20. 		});
  21. });
  22. </script>
  23. </head>
  24. <body>
  25. <button id="btn">show-hide</button>
  26. <div id="ad"></div>
  27. </body>
  28. </html>
同一个按钮点击左边移动三百，再点击回来
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  8. #ad{
  9. 	width:300px;
  10. 	height:300px;
  11. 	background-color:red;
  12. 	position:absolute;
  13. }
  14. </style>
  15. <script src="js/jquery-1.11.2.min.js"></script>
  16. <script src="js/jquery.easing.1.3.js"></script>
  17. <script>
  18. $(document).ready(function(e){
  19. 	$('#btn').click(function(){
  20. 		//$('#ad').animate({left:300},'slow');
  21. 		$('#ad').position().left==300 ? $('#ad').animate({left:0},'slow') : $('#ad').animate({left:300},'slow') ;
  22. 		});
  23. });
  24. </script>
  25. </head>
  26. <body>
  27. <button id="btn">show-hide</button>
  28. <div id="ad"></div>
  29. </body>
  30. </html>
点左向左移，点右向右移动
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  8. #ad{
  9. 	width:300px;
  10. 	height:300px;
  11. 	background-color:red;
  12. 	position:absolute;
  13. }
  14. </style>
  15. <script src="js/jquery-1.11.2.min.js"></script>
  16. <script src="js/jquery.easing.1.3.js"></script>
  17. <script>
  18. $(document).ready(function(e){
  19. 	$('#btn').click(function(){
  20. 		if($('#ad').position().left==300){
  21. 			$('#ad').animate({left:0},'slow');
  22. 			$(this).html('right');
  23. 		}else{
  24. 		$('#ad').animate({left:300},'slow');
  25. 			$(this).html('left');
  26. 		}
  27. 		});
  28. });
  29. </script>
  30. </head>
  31. <body>
  32. <button id="btn">show-hide</button>
  33. <div id="ad"></div>
  34. </body>
  35. </html>
 fadeIn()  == show()
fadeOut()  ==  hide()
juqery 控制返回顶部效果
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  8. #ad{
  9. 	width:300px;
  10. 	height:300px;
  11. 	background-color:red;
  12. 	position:absolute;
  13. }
  14. .rightad{
  15. 	width:100px;
  16. 	height:50px;
  17. 	background-color:#DF04A7;
  18. 	position:fixed;
  19. 	top:500px;
  20. 	right:0;
  21. 	display:none;
  22. }
  23. </style>
  24. <script src="js/jquery-1.11.2.min.js"></script>
  25. <script src="js/jquery.easing.1.3.js"></script>
  26. <script>
  27. $(document).ready(function(e){
  28. 	//控制点击返回顶部
  29. 	$('.rightad').click(function(){
  30. 		$('html,body').animate({scrollTop:0},'slow');
  31. 	});
  32. 	//控制当滚动到大于300时显示右边返回顶部的方块
  33. 	$(window).scroll(function(){
  34. 		if($(this).scrollTop()>300){
  35. 			$('.rightad').show();
  36. 			//$('rightad').fadeIn('slow');
  37. 		}else{
  38. 			$('.rightad').fadeOut('slow');
  39. 		}
  40. 	});
  41. 	
  42. });
  43. </script>
  44. </head>
  45. <body>
  46. <div class="rightad"></div>
  47. <button id="btn">show-hide</button><br>
  48. <div id="ad"></div><br>
  49. <hr>
  50. <button id="btn">show-hide</button><br>
  51. <div id="ad"></div><br>
  52. <hr>
  53. <button id="btn">show-hide</button><br>
  54. <div id="ad"></div><br>
  55. <hr>
  56. <button id="btn">show-hide</button><br>
  57. <div id="ad"></div><br>
  58. <hr>
  59. <button id="btn">show-hide</button><br>
  60. <div id="ad"></div><br>
  61. <hr>
  62. <button id="btn">show-hide</button><br>
  63. <div id="ad"></div><br>
  64. <hr>
  65. <button id="btn">show-hide</button><br>
  66. <div id="ad"></div><br>
  67. <hr><button id="btn">show-hide</button><br>
  68. <div id="ad"></div><br>
  69. <hr>
  70. <button id="btn">show-hide</button><br>
  71. <div id="ad"></div><br>
  72. <hr>
  73. <button id="btn">show-hide</button><br>
  74. <div id="ad"></div><br>
  75. <hr>
  76. <button id="btn">show-hide</button><br>
  77. <div id="ad"></div><br>
  78. <hr>
  79. <button id="btn">show-hide</button><br>
  80. <div id="ad"></div><br>
  81. <hr>
  82. <button id="btn">show-hide</button><br>
  83. <div id="ad"></div><br>
  84. <hr><button id="btn">show-hide</button><br>
  85. <div id="ad"></div><br>
  86. <hr>
  87. <button id="btn">show-hide</button><br>
  88. <div id="ad"></div><br>
  89. <hr>
  90. <button id="btn">show-hide</button><br>
  91. <div id="ad"></div><br>
  92. <hr>
  93. <button id="btn">show-hide</button><br>
  94. <div id="ad"></div><br>
  95. <hr>
  96. <button id="btn">show-hide</button><br>
  97. <div id="ad"></div><br>
  98. <hr>
  99. <button id="btn">show-hide</button><br>
  100. <div id="ad"></div><br>
  101. <hr>
  102. <button id="btn">show-hide</button><br>
  103. <div id="ad"></div><br>
  104. <hr>
  105. <button id="btn">show-hide</button><br>
  106. <div id="ad"></div><br>
  107. <hr>
  109. </body>
  110. </html>
带动画的右侧固定滚动的效果 一定要用绝对定位
position:absolute;
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #ad{
  8. 	width:300px;
  9. 	height:300px;
  10. 	background-color:red;
  11. 	position:absolute;
  12. }
  13. .rightad{
  14. 	width:200px;
  15. 	height:50px;
  16. 	background-color:#DF04A7;
  17. 	position:absolute;
  18. 	right:0;
  19. }
  20. </style>
  21. <script src="js/jquery-1.11.2.min.js"></script>
  22. <script src="js/jquery.easing.1.3.js"></script>
  23. <script>
  24. $(document).ready(function(e){
  25. 	var t=100;//100表示距离顶部的距离
  26. 	function tt(){
  27. 		var pos=t + $(window).scrollTop();
  28. 		$('.rightad').stop().animate({top:pos},1000);
  29. 	}
  30. 	tt();
  31. 	$(window).scroll(tt);
  32. });
  33. </script>
  34. </head>
  35. <body>
  36. <div class="rightad"></div>
  37. <button id="btn">show-hide</button><br>
  38. <div id="ad"></div><br>
  39. <hr>
  40. <button id="btn">show-hide</button><br>
  41. <div id="ad"></div><br>
  42. <hr>
  43. <button id="btn">show-hide</button><br>
  44. <div id="ad"></div><br>
  45. <hr>
  46. <button id="btn">show-hide</button><br>
  47. <div id="ad"></div><br>
  48. <hr>
  49. <button id="btn">show-hide</button><br>
  50. <div id="ad"></div><br>
  51. <hr>
  52. <button id="btn">show-hide</button><br>
  53. <div id="ad"></div><br>
  54. <hr>
  55. <button id="btn">show-hide</button><br>
  56. <div id="ad"></div><br>
  57. <hr><button id="btn">show-hide</button><br>
  58. <div id="ad"></div><br>
  59. <hr>
  60. <button id="btn">show-hide</button><br>
  61. <div id="ad"></div><br>
  62. <hr>
  63. <button id="btn">show-hide</button><br>
  64. <div id="ad"></div><br>
  65. <hr>
  66. <button id="btn">show-hide</button><br>
  67. <div id="ad"></div><br>
  68. <hr>
  69. <button id="btn">show-hide</button><br>
  70. <div id="ad"></div><br>
  71. <hr>
  72. <button id="btn">show-hide</button><br>
  73. <div id="ad"></div><br>
  74. <hr><button id="btn">show-hide</button><br>
  75. <div id="ad"></div><br>
  76. <hr>
  77. <button id="btn">show-hide</button><br>
  78. <div id="ad"></div><br>
  79. <hr>
  80. <button id="btn">show-hide</button><br>
  81. <div id="ad"></div><br>
  82. <hr>
  83. <button id="btn">show-hide</button><br>
  84. <div id="ad"></div><br>
  85. <hr>
  86. <button id="btn">show-hide</button><br>
  87. <div id="ad"></div><br>
  88. <hr>
  89. <button id="btn">show-hide</button><br>
  90. <div id="ad"></div><br>
  91. <hr>
  92. <button id="btn">show-hide</button><br>
  93. <div id="ad"></div><br>
  94. <hr>
  95. <button id="btn">show-hide</button><br>
  96. <div id="ad"></div><br>
  97. <hr>
  98. </body>
  99. </html>

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>webrx-title</title>
  6. <style>
  7. #ad{
  8.     width:300px;
  9. 	height:200px;
  10. 	background-color:red;	
  11.     margin:20px;
  12. }
  14. .rightad{
  15.     width:200px;
  16. 	height:150px;
  17. 	background-color:#E30CC0;
  18. 	position:absolute;
  19. 	right:10px;
  20. 	top:-200px;	
  21. }
  22. </style>
  24. <script src="js/jquery-1.11.2.min.js"></script>
  25. <script>
  26. $(document).ready(function(e) {
  27. 	var t = 200;
  28. 	function tt(){
  29. 		var pos = t + $(window).scrollTop();
  30. 	    $('.rightad').stop().animate({top:pos},1000);	
  31. 	}
  32. 	tt();
  33. 	
  34. 	$(window).scroll(tt);
  35. });
  36. </script>
  37. </head>
  39. <body>
  40. <div class="rightad"></div>
  41. <button id="btn">show-hide</button><br>
  42. <div id="ad"></div><br>
  43. <h1>hh</h1><br>
  44. <hr>
  45. <button id="btn">show-hide</button><br>
  46. <div id="ad"></div><br>
  47. <h1>hh</h1><br>
  48. <hr>
  49. <button id="btn">show-hide</button><br>
  50. <div id="ad"></div><br>
  51. <h1>hh</h1><br>
  52. <hr>
  53. <button id="btn">show-hide</button><br>
  54. <div id="ad"></div><br>
  55. <h1>hh</h1><br>
  56. <hr>
  57. <button id="btn">show-hide</button><br>
  58. <div id="ad"></div><br>
  59. <h1>hh</h1><br>
  60. <hr>
  61. <button id="btn">show-hide</button><br>
  62. <div id="ad"></div><br>
  63. <h1>hh</h1><br>
  64. <hr>
  65. <button id="btn">show-hide</button><br>
  66. <div id="ad"></div><br>
  67. <h1>hh</h1><br>
  68. <hr>
  69. <button id="btn">show-hide</button><br>
  70. <div id="ad"></div><br>
  71. <h1>hh</h1><br>
  72. <hr>
  73. <button id="btn">show-hide</button><br>
  74. <div id="ad"></div><br>
  75. <h1>hh</h1><br>
  76. <hr>
  77. <button id="btn">show-hide</button><br>
  78. <div id="ad"></div><br>
  79. <h1>hh</h1><br>
  80. <hr>
  81. <button id="btn">show-hide</button><br>
  82. <div id="ad"></div><br>
  83. <h1>hh</h1><br>
  84. <hr>
  85. <button id="btn">show-hide</button><br>
  86. <div id="ad"></div><br>
  87. <h1>hh</h1><br>
  88. <hr>
  89. <button id="btn">show-hide</button><br>
  90. <div id="ad"></div><br>
  91. <h1>hh</h1><br>
  92. <hr>
  93. <button id="btn">show-hide</button><br>
  94. <div id="ad"></div><br>
  95. <h1>hh</h1><br>
  96. <hr>
  97. <button id="btn">show-hide</button><br>
  98. <div id="ad"></div><br>
  99. <h1>hh</h1><br>
  100. <hr>
  101. <button id="btn">show-hide</button><br>
  102. <div id="ad"></div><br>
  103. <h1>hh</h1><br>
  104. <hr>
  105. <button id="btn">show-hide</button><br>
  106. <div id="ad"></div><br>
  107. <h1>hh</h1><br>
  108. <hr>
  109. <button id="btn">show-hide</button><br>
  110. <div id="ad"></div><br>
  111. <h1>hh</h1><br>
  112. <hr>
  113. <button id="btn">show-hide</button><br>
  114. <div id="ad"></div><br>
  115. <h1>hh</h1><br>
  116. <hr>
  117. <button id="btn">show-hide</button><br>
  118. <div id="ad"></div><br>
  119. <h1>hh</h1><br>
  120. <hr>
  121. <button id="btn">show-hide</button><br>
  122. <div id="ad"></div><br>
  123. <h1>hh</h1><br>
  124. <hr>
  125. <button id="btn">show-hide</button><br>
  126. <div id="ad"></div><br>
  127. <h1>hh</h1><br>
  128. <hr>
  129. <button id="btn">show-hide</button><br>
  130. <div id="ad"></div><br>
  131. <h1>hh</h1><br>
  132. <hr>
  133. <button id="btn">show-hide</button><br>
  134. <div id="ad"></div><br>
  135. <h1>hh</h1><br>
  136. <hr>
  137. <button id="btn">show-hide</button><br>
  138. <div id="ad"></div><br>
  139. <h1>hh</h1><br>
  140. <hr>
  141. <button id="btn">show-hide</button><br>
  142. <div id="ad"></div><br>
  143. <h1>hh</h1><br>
  144. <hr>
  145. <button id="btn">show-hide</button><br>
  146. <div id="ad"></div><br>
  147. <h1>hh</h1><br>
  148. <hr>
  149. <button id="btn">show-hide</button><br>
  150. <div id="ad"></div><br>
  151. <h1>hh</h1><br>
  152. <hr>
  153. <button id="btn">show-hide</button><br>
  154. <div id="ad"></div><br>
  155. <h1>hh</h1><br>
  156. <hr>
  157. <button id="btn">show-hide</button><br>
  158. <div id="ad"></div><br>
  159. <h1>hh</h1><br>
  160. <hr>
  161. <button id="btn">show-hide</button><br>
  162. <div id="ad"></div><br>
  163. <h1>hh</h1><br>
  164. <hr>
  165. <button id="btn">show-hide</button><br>
  166. <div id="ad"></div><br>
  167. <h1>hh</h1><br>
  168. <hr>
  169. <button id="btn">show-hide</button><br>
  170. <div id="ad"></div><br>
  171. <h1>hh</h1><br>
  172. <hr>
  173. <button id="btn">show-hide</button><br>
  174. <div id="ad"></div><br>
  175. <h1>hh</h1><br>
  176. <hr>
  177. <button id="btn">show-hide</button><br>
  178. <div id="ad"></div><br>
  179. <h1>hh</h1><br>
  180. <hr>
  181. <button id="btn">show-hide</button><br>
  182. <div id="ad"></div><br>
  183. <h1>hh</h1><br>
  184. <hr>
  185. <button id="btn">show-hide</button><br>
  186. <div id="ad"></div><br>
  187. <h1>hh</h1><br>
  188. <hr>
  189. <button id="btn">show-hide</button><br>
  190. <div id="ad"></div><br>
  191. <h1>hh</h1><br>
  192. <hr>
  193. <button id="btn">show-hide</button><br>
  194. <div id="ad"></div><br>
  195. <h1>hh</h1><br>
  196. <hr>
  197. <button id="btn">show-hide</button><br>
  198. <div id="ad"></div><br>
  199. <h1>hh</h1><br>
  200. <hr>
  201. <button id="btn">show-hide</button><br>
  202. <div id="ad"></div><br>
  203. <h1>hh</h1><br>
  204. <hr>
  205. <button id="btn">show-hide</button><br>
  206. <div id="ad"></div><br>
  207. <h1>hh</h1><br>
  208. <hr>
  209. <button id="btn">show-hide</button><br>
  210. <div id="ad"></div><br>
  211. <h1>hh</h1><br>
  212. <hr>
  213. <button id="btn">show-hide</button><br>
  214. <div id="ad"></div><br>
  215. <h1>hh</h1><br>
  216. <hr>
  217. <button id="btn">show-hide</button><br>
  218. <div id="ad"></div><br>
  219. <h1>hh</h1><br>
  220. <hr>
  221. <button id="btn">show-hide</button><br>
  222. <div id="ad"></div><br>
  223. <h1>hh</h1><br>
  224. <hr>
  226. </body>
  227. </html>








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