JQuery Hover Fading on Mouse Over and Mouse Out Without Images

I've been playing with the excellent JQuery JavaScript library for a while now. Recently I came across a technique for fading in and out two images based on mouse over and mouse out; and I wanted to see if I could create a fade-in and fade-out hover effect without the images.

It's a testament to the robustness and flexibility of JQuery that I could do this in so little code, with so little knowledge. Admittedly my first go can be CPU-intensive, however the code is short and sweet - include JQuery and JQuery UI, mark your elements with a CSS class called "fadeThis", and put the snippet of script below into your document's HEAD:

  1.   <script type="text/javascript">
  2.     // adapted from http://www.incg.nl/blog/2008/hover-block-jquery
  3.     // and http://greg-j.com/static-content/hover-fade-redux.html
  4.     $(document).ready(function() {
  5.       $('.fadeThis').hover(
  6.         function () {
  7.           $(this).animate({backgroundColor:'Yellow', color:'Red'}, {queue:false,duration:500});
  8.         }, function () {
  9.           $(this).animate({backgroundColor:'#ececed', color:'#777777'}, {queue:false,duration:500});
  10.         });
  11.     });
  12.   </script>

The one-line functions starting with $(this).animate... fade the background and text colors on mouse over and mouse out for a subtle effect. One limitation is that I haven't found a good way to fade the border color, yet (and keep in mind I'm using Internet Explorer, so YMMV).

If you're into low-impact progressive enhancement, you can also reference the needed libraries from central Google hosting like so:

  1.   <!-- include Google's AJAX API loader -->
  2.   <script src="http://www.google.com/jsapi"></script>
  3.   <!-- load JQuery and UI from Google (need to use UI to animate colors) -->
  4.   <script type="text/javascript">
  5.     google.load("jquery", "1.2.6");
  6.     google.load("jqueryui", "1.5.2");
  7.   </script>

I hope this little snippet can form the basis of something useful for someone. It's a nice effect that fades in and out, all without the use of images.

Tags: , , ,

posted @ Monday, November 24, 2008 4:17 PM

Print

Comments on this entry:

# re: JQuery Hover Fading on Mouse Over and Mouse Out Without Images

Left by Dave at 11/25/2008 6:19 AM
Gravatar
Example or it didn't happen! :)

# re: JQuery Hover Fading on Mouse Over and Mouse Out Without Images

Left by Thomas Williams at 11/26/2008 2:09 PM
Gravatar
Hi Dave, yeah, sorry, I don't have an example. Maybe I need to set up my own example site!

The code does work but requires some copy-and-paste; I can send you a ZIP containing the one-page HTML if you like.

Cheers, Thomas

# re: JQuery Hover Fading on Mouse Over and Mouse Out Without Images

Left by WebDevVote at 11/26/2008 8:16 PM
Gravatar
You're been voted!
Track back from http://webdevvote.com

# re: JQuery Hover Fading on Mouse Over and Mouse Out Without Images

Left by Jonas Flint at 11/27/2008 1:19 PM
Gravatar
Works like a charm. Thanks!

# re: JQuery Hover Fading on Mouse Over and Mouse Out Without Images

Left by Thomas Williams at 11/27/2008 7:04 PM
Gravatar
Thanks Jonas.

# re: JQuery Hover Fading on Mouse Over and Mouse Out Without Images

Left by andris at 11/27/2008 9:32 PM
Gravatar
Work perfect, thank you share it!

# re: JQuery Hover Fading on Mouse Over and Mouse Out Without Images

Left by Thomas Williams at 11/27/2008 10:18 PM
Gravatar
Thanks Andris.

# re: JQuery Hover Fading on Mouse Over and Mouse Out Without Images

Left by paard at 12/15/2008 11:48 PM
Gravatar
Thanks for the code, it works perfectly!

# re: JQuery Hover Fading on Mouse Over and Mouse Out Without Images

Left by 6stech.com webpresence at 1/9/2009 11:35 PM
Gravatar
Jquery architecture is one of the best. The innovative implementations like this hover effect makes it more useable. An example site would help with such snippet.

If I get time I will try to make example out of it and post again

Thanks

# re: JQuery Hover Fading on Mouse Over and Mouse Out Without Images

Left by Thomas Williams at 1/11/2009 2:36 PM
Gravatar
Thanks 6stech - an online example would be good judging by yours and others' comments.

# AjaxLine

Left by Pingback/TrackBack at 3/4/2009 3:34 PM
Gravatar
AjaxLine
Comments have been closed on this topic.
«April»
SunMonTueWedThuFriSat
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910