advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

1man on 01/19/08


Tagged

javascript jquery fade


Versions (?)


Who likes this?

3 people have marked this snippet as a favorite

liqweed
klick
stavelin


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.

Plain TextExpand 
  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 

You need to login to post a comment.