Posted By

1man on 01/19/08


Tagged

javascript jquery fade


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

liqweed
klick
stavelin
bryandease
vladikoff
vkolev
seanpowell


jQuery Link Background Quick Fade


 / Published in: JavaScript
 

Found this quick little bit of code on the Google jQuery discussion group. It simply fades the background image of a link you have hovered over to a certain color, then fades it back to the original color.

  1. //Grab the original BG color of the link
  2. var originalBG = $(".animate").css("background-color");
  3. //The color you want to fade too
  4. var fadeColor = "#CCCCCC";
  5.  
  6. //Now animate on links with class = animate
  7. $(".animate").hover(
  8. function() {
  9. $(this)
  10. //Fade to the new color
  11. .animate({backgroundColor:fadeColor}, 750)
  12. //Fade back to original color
  13. .animate({backgroundColor:originalBG},750)
  14. },
  15. function(){
  16.  
  17. }
  18. );

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: bartclaeys on April 24, 2009

Note that you need the jquery.color.js plugin to accomplish color fading.

You need to login to post a comment.