jQuery Animation Effects - basics


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



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.