Hover fading transition with jQuery

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.

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.

[...] 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

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 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.

Nice and informative article…

hi Greg.. really nice effect, i was looking for something like this…i’ve used it in my 404 error page…
I’ve a question to do you…in the example, you use only one class in the script code [ $('.fadeThis') ], my problem is that i want to use different buttons with different background images. I copy and paste the same scrip code and changed the class name…this method work, but create a lot of unuseless code.

How can i apply the script in several classes ?? I try writting [ $('.class1', '.class2'), '.class3' ] but it doesn’t work jejeee

thanks for help me
adeux!

You are voted!
Track back from http://webdevvote.com/Javascript/Hover_fading_transition_with_jQuery_Greg_J_com

Works great , but unfortunately IE6 not supported ..
Can anyone Fix that ?

I saw a couple requests for changing the method to keep the “hidden text”. The method below will show the text when scrolling over.

$(document).ready(function() {
$('.fadethis').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
});

excellent post!

very useful, thanks!

Hi, I came across your tutorial and it has caused a tremendous creative spur. Thank you. I am stuck however trying to get my clicked buttons to remain faded on. I was able to change the class of the span from .hover to .active in hopes that I would have more control over the opacity but the fadeOut function still persists and clears the on position when I remove my mouse. Can you offer some guidance?

Thanks again, a real help.

-Gk

Theodore Cowan post doest not work. I would love to have hidden text show.

I really appreciated this tutorial – it worked perfectly on what I was looking to accomplish. I like to take it one step further and I am having problems. To start here is the answer to what Raphael is looking for. Well it works for what I am doing.

Scripting
$(‘a.button’).each(function () {
$(this).append(”+$(this).text()+”);
var $span = $(‘> span.hover’, this).css(‘opacity’, 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});

your text
your text
your text

If you are using text only within your href use $(this).text() and if you are using additional styling to your text using $(this).html()

Now where I like to go with this is to use it with jFLow and when you click on the link introduce a 3rd state and append the class=”active” span. I tried everything I and I believe I am not eliminating the right classes added during the hover event; as it isn’t appearing.

I have a feeling it is and it is being covered by the hover event. Any ideas on doing this?

Able to add one more piece to the puzzle. Adding a click function that removes the hover class and replaces it with an active class. Now just scratching my head that resets the button back if another is clicked.

$(‘a.button’).each(function () {
var text = $(this).text();
$(this).empty().append(”+text+”);
var $span = $(‘> span.hover’, this).css(‘opacity’, 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
}).click (function () {
$(this).empty().append(”+text+”);
});
});

Sorry scratch that and add try this.

$(‘a.button’).each(function () {
var text = $(this).text();
$(this).append(”+text+”);
var $span = $(‘> span.hover’, this).css(‘opacity’, 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
}).click (function () {
$(this).empty().append(”+text+”);
});
});

Thank you very much for the use of you scripting.. With help from a Stack Overflow post the solution to work for my needs is the following incase someone requires the same solution.


$('a.button').each(function () {
var text = $(this).text();

$(this).append(''+text+'');
var $span = $('> span.hover', this).css('opacity', 0);

$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
}).click (function () {
$('a.button > span.active').removeClass();
$(this).empty().append(''+text+'');
});
});

How can I fix the black border during the fading in IE?

How do you put multiple buttons on the same page with different images as backgrounds? Pretty reasonable question that hasn’t been answered yet…

[...] Button Hover Fading Transition with jQuery [...]

[...] Button Hover Fading Transition with jQuery [...]