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:
-
<script type="text/javascript">
-
// adapted from http://www.incg.nl/blog/2008/hover-block-jquery
-
// and http://greg-j.com/static-content/hover-fade-redux.html
-
$(document).ready(function() {
-
$('.fadeThis').hover(
-
function () {
-
$(this).animate({backgroundColor:'Yellow', color:'Red'}, {queue:false,duration:500});
-
}, function () {
-
$(this).animate({backgroundColor:'#ececed', color:'#777777'}, {queue:false,duration:500});
-
});
-
});
-
</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:
-
<!-- include Google's AJAX API loader -->
-
<script src="http://www.google.com/jsapi"></script>
-
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
-
<script type="text/javascript">
-
google.load("jquery", "1.2.6");
-
google.load("jqueryui", "1.5.2");
-
</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: jquery, fade, UI, effect