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.
Hi, was there any reason why you didn’t just use ‘method 2′ from the jQuery for Designers tutorial and wrap the image in a link? It would (initially in my head) appear to solve the problem you want to solve, and it wouldn’t have the issue of randomly stopping (which I think is to do with the fade effect conflicting - though I’ve not looked at it in detail yet).
Cheers, Remy.
As you mentioned, ‘method 2′ would require I wrap the image in a link. I’m kind of a stickler for semantic markup, and I have used the image replacement technique since before it was a technique. I don’t like the idea of having to change my markup to accommodate javascript.
Thank you for your reply though. I’ve subscribed to your blog. Good stuff!
Having looked more at the solution, I can see the advantage of the animation like this. I’ve also fixed your hover problem - but you need to change the markup and CSS a little.
Here’s the working example: http://remysharp.com/demo/greg-j.html
The change followed the way Dragon Interactive have applied the technique - in particular, the hover fade through is actually applied using JavaScript and the real text is hidden from the outset (not explained very well - but you’ll see it in the markup).
I’ve been asked by another reader if I can reproduce Dragon Interactive’s effect - so I might do a mini post and credit you for the bulk of the technique if you’re happy with that?
Cheers.
That’s excellent Remy.
I originally tried something very similar, but by inexperience in javascript won out over my own perseverance. It’s great to see the differences of how I was trying and how it should have been done. Thank you.
As for any credit, sure. A link from your blog couldn’t hurt
I’ll be doing a similarly updated post as well displaying your revised method.
Cheers
[...] has a beautiful little transition for their navigation that some readers have been requesting. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown [...]
great tutorial. im just wondering about using text instead of picture. maybe you could show me how to do it
I can think of a few ways to do it, but the question I have is: Why? I’m specifically using an image replacement technique which prevents you from having to use an inline image so search engines see what they need to see.
Could you clarify the why and perhaps I could answer your question better?
Great tutorial, it helped me a lot with a hover queue issue I’d been fighting with. Thank you!
Hey, thanks a lot for the technique, I was just trying it on a project and was wondering: would it be possible to use this technique and keep the text? Your ‘this content is hidden’ text I mean.
I would have several buttons all coming from the same image, but with different (dynamically generated) contents on them.
I’d second delang and Floris’s requests for using this technique, but retaining the text.
With the current method, if you want to use the button for something else, you have to create 2 different images, (Two different images actually, hover and idle)
If the text could be retained, the same cool animated button could be reused… so say I have 20 buttons on my site.
Currently I have to render and load 40 images, if the text could remain I would only need 2 images (actually one because we’re using background positioning)
So yeah, retaining the text would be invaluable
Any help massivelly appreciated, and thanks for the tutorial! Excellent work
I can think of a couple ways to do it off the top of my head, but I won’t have time to actually write a tutorial for at least a week or two
I understand, you must be busy…. but if you were to give me a clue, I’m sure I could work it out, and then I’ll post it in the comments!
Sorry to cheeky, just in love with this technique!
JAy
One hacky thing I thought of was generating the title on the buttons using the php gd library, using a little script… It’s probably not the best way to go, but it should work.