One of my new favorite blogs to read is jQuery for designers. Mainly because the guy who runs it seems to have the same obsession for the very design elements I do and partly because he’s better at jQuery than I am and I learn something every article I read (or watch, he offers screencasts for every article which is… mmm… unique).
One of the many techniques I have needed for this next wordpress theme I’m releasing is a fading hover effect. You can see it used on Dragon Labs as well as the jQuery UI site. Unfortunately the only site is done in degradable and semantic way is Dragon Labs, but Anand doesn’t have his code readily available and I haven’t talked to him in years. So… I tore into the code available from jqueryfordesigners…
You can view their article here.
My problem with the way(s) this effect is accomplished with the technique(s) from jqueryfordesigners is that this effect is only useful to me for links, and I’m not crazy about linking using an onclick event (shame on you jQuery). So I ventured out to edit their code and see if I couldn’t do it better - and by better I mean better for my particular situation. What I came up with was a solution that allows no images to be tied into the markup. The entire process is handled without the need of inline images or extra hidden elements. I would say it was perfect if it wasn’t for the fact that every now and then it simply stops working - for no apparent reason at all.
This method is now out of date. Please view this example for a simpler, revised version that does not suffer from the bug this version does.
The demo is pretty self explanatory, but here’s a play-by-play:
Step 1:
Include jQuery.
Step 2:
Include the following code:
$(document).ready(function() { // find the div.fade elements and hook the hover event $('.fadeThis').hover(function() { // on hovering over find the element we want to fade *up* var fade = $('> .hover', this); // if the element is currently being animated (to fadeOut)... if (fade.is(':animated')) { // ...stop the current animation, and fade it to 1 from current position fade.stop().fadeTo(500, 1); } else { fade.fadeIn(500); } }, function () { var fade = $('> .hover', this); if (fade.is(':animated')) { fade.stop().fadeTo(500, 0); } else { fade.fadeOut(500); } }); // get rid of the text $('.fadeThis > .hover').empty(); })
Step 3:
Form your html using a similar pattern:
<a class="fadeThis" href="http://greg-j.com"> <span class="hover">This content is hidden</span> </a>
If you know why this effect seems to randomly stop working - or better yet, how to fix it - please let me know.





26 Comments »