Advanced Search

jQuery Animation Effects - basics

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html> 
  2. <head> 
  3. <title>Animation Effects - jQuery Basics</title> 
  4. <meta name="description" content="jQuery animation effects - Basic Tutorial for custom animations like slide, toggle, fade, show/hide a DIV"> 
  5. <script src="http://code.jquery.com/jquery-1.4.3.min.js" type="text/javascript"></script> 
  6. <!-- Stylesheet -->
  7. <style type="text/css">
  8. #box1 {
  9. width: 200px;
  10. height: 200px;
  11. background: blue;
  12. display: none;
  13. }
  14. #box2 {
  15. width: 200px;
  16. height: 200px;
  17. background: green;
  18. }
  19. #box3 {
  20. width: 200px;
  21. height: 200px;
  22. background: orange;
  23. display: none;
  24. position: relative;
  25. }
  26. #box4 {
  27. width: 200px;
  28. height: 200px;
  29. background: red;
  30. position: relative;
  31. }
  32. #box5 {
  33. width: 200px;
  34. height: 200px;
  35. background: brown;
  36. display: none;
  37. position: relative;
  38. }
  39. #box6 {
  40. width: 200px;
  41. height: 200px;
  42. background: purple;
  43. position: relative;
  44. }
  45. #box7 {
  46. width: 200px;
  47. height: 200px;
  48. background: maroon;
  49. position: relative;
  50. }
  51. #box8 {
  52. width: 200px;
  53. height: 200px;
  54. background: black;
  55. position: relative;
  56. }
  57. a {
  58. text-decoration: none;
  59. }
  60. a:hover {
  61. color: #070F0B;
  62. font-weight: bold;
  63. }
  64.  
  65.  
  66. </style> 
  67. <script type="text/javascript"> 
  68. /* Calling the Generic Function for Jquery */
  69. /* Strings are written in single quotes, whereas numbers are not in quotes */
  70. /* Transitions takes place in 3000 milliseconds */ 
  71. $(function() {
  72. /* On CLicking the link with id = a1, perform the following action */
  73. 		$('a#a1').click(function() {
  74. /* Fade in the DIV with id = box, with initial display (of the DIV) set to none */
  75. 		$('#box1').fadeIn(3000); 
  76. 					});
  77. /* On clicking the link with id = a2, perform the following action */
  78. 		$('a#a2').click(function() {
  79. /* Fade out the DIV with id = box2 */
  80. 		$('#box2').fadeOut(3000);
  81. 					});
  82. 		$('a#a3').click(function() {
  83. /* Show the DIV with id = box3, initial display being none */
  84. 		$('#box3').show(3000);
  85. 					});
  86. 		$('a#a4').click(function() {
  87. /* Hide the DIV with ID = box4 */
  88. 		$('#box4').hide(3000);
  89. 					});
  90. 		$('a#a5').click(function() {
  91. /* SlideDown the DIV with ID = box5 */
  92. 		$('#box5').slideDown(3000);
  93. 					});
  94. 		$('a#a6').click(function() {
  95. /* SlideUp the DIV with ID = box6 */
  96. 		$('#box6').slideUp(3000);
  97. 					});
  98. 		$('a#a7').click(function() {
  99. /* Toogle Slide the DIV with ID = box7 */
  100. 		$('#box7').slideToggle(3000);
  101. 					});
  102. 		$('a#a8').click(function() {
  103. /* Change the opacity of the DIV with ID = box8 */
  104. 		$('#box8').fadeTo('slow', 0.5, function() {
  105. 					}); });
  106. 	});
  107. </script> 
  108. </head> 
  109. <body> 
  110. <h3>Animation Effects - jQuery Basics</h3> 
  111. <table cellpadding="2px"> 
  112. <tr> 
  113. 	<td valign="top" width="220px"> 
  114. 		<div id="box1"></div> 
  115. 		<a href="#" id="a1">Click to fade in a DIV</a> 
  116. 	</td> 
  117. 	<td valign="top" width="220px"> 
  118. 		<div id="box2"></div> 
  119. 		<a href="#" id="a2">Click to fade out a DIV</a> 
  120. 	</td> 
  121. 	<td valign="top" width="220px"> 
  122. 		<div id="box3"></div> 
  123. 		<a href="#" id="a3">Click to show a DIV</a> 
  124. 	</td> 
  125. </tr> 
  126. <tr> 
  127. 	<td valign="top" width="220px"> 
  128. 		<div id="box4"></div> 
  129. 		<a href="#" id="a4">Click to hide a DIV</a> 
  130. 	</td> 
  131. 	<td valign="top" width="220px"> 
  132. 		<div id="box5"></div> 
  133. 		<a href="#" id="a5">Click to slide down a DIV</a> 
  134. 	</td> 
  135. 	<td valign="top" width="220px"> 
  136. 		<div id="box6"></div> 
  137. 		<a href="#" id="a6">Click to slide up a DIV</a> 
  138. 	</td> 
  139. </tr> 
  140. <tr> 
  141. 	<td valign="top" width="220px"> 
  142. 	<div id="box7"></div> 
  143. 	<a href="#" id="a7">Click to toggle slide a DIV</a> 
  144. 	</td> 
  145. 	<td valign="top" width="220px"> 
  146. 	<div id="box8"></div> 
  147. 	<a href="#" id="a8">Click here to change the opacity of a DIV</a> 
  148. 	</td> 
  149. </tr> 
  150. </table> 
  151. </body> 
  152. </html>

URL: http://srikanth.techonaut.com/code/jquery/jquery-animation-effects-basics.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.