jQuery Link Background Quick Fade

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

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.

Copy this code and paste it in your HTML
  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";
  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(){
  17. }
  18. );

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.