Advanced Search

jQuery animations

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //FadeOut
  2. $('#hideButton').click(function() {
  3. $('#disclaimer').fadeOut();
  4. });
  5.  
  6. //Toggle
  7. $('#toggleButton').click(function() {
  8. $('#disclaimer').toggle('slow');
  9. });
  10.  
  11. //Slide
  12. $('#toggleButton').click(function() {
  13. $('#disclaimer').slideToggle('slow');
  14. });
  15.  
  16. $('#disclaimer').slideToggle('slow', function() {
  17. alert('The slide has finished sliding!')
  18. });
  19.  
  20.  
  21. $('#disclaimer').slideUp('slow', function() {
  22. $('#hideButton').fadeOut();
  23. });
  24.  
  25. //Hover effects
  26. $('#celebs tr').mouseover(function() {
  27. $(this).addClass('zebraHover');
  28. });
  29. $('#celebs tr').mouseout(function() {
  30. $(this).removeClass('zebraHover');
  31. });
  32. // ^ Same as
  33. $('#celebs tbody tr').hover(function() {
  34. $(this).addClass('zebraHover');
  35. }, function() {
  36. $(this).removeClass('zebraHover');
  37. });
  38.  
  39. //Toggle class
  40. $('#celebs tbody tr').click(function() {
  41. $(this).toggleClass('zebraHover');
  42. });
  43.  
  44.  
  45. //Spoiler alert
  46. Who lost their recording contract today?
  47. <span class='spoiler'>The Zaxntines!</span>
  48.  
  49. $('.spoiler').hide();
  50. $('<span class="revealer">Tell me!</span>').insertBefore('.spoiler');
  51. $('.revealer').click(function() {
  52. $(this).hide();
  53. $(this).next().fadeIn();
  54. });
  55.  
  56. //Animate
  57. $('#navigation li').hover(function() {
  58. $(this).animate({paddingLeft: '+=15px'}, 200);
  59. }, function() {
  60. $(this).animate({paddingLeft: '-=15px'}, 200);
  61. });
  62. //-----or
  63. $('#disclaimer').animate({
  64. opacity: 'hide',
  65. height: 'hide'
  66. }, 'slow');
  67.  
  68. //Transition (easing)
  69. $('p:first').toggle(function() {
  70. $(this).animate({'height':'+=150px'}, 1000, 'linear');
  71. }, function() {
  72. $(this).animate({'height':'-=150px'}, 1000, 'swing');
  73. });
  74.  
  75. //Chaining actions
  76. $('p:first').hide().slideDown('slow').fadeOut(); //.delay(2000) to pause

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.