Smooth transition between two (class) and (class):hover

Question

Is there a script/way, that makes normal CSS :hover more smooth?

Idea would be, that you got two classes maybe with gradient backgrounds, and the script would smoothly swap the classes. So the gradients would look like your pressing a button. Should be automatic, so you call the trigger: $('.someclass').SmoothTransition(); and it would automatically use the .someclass:hover as the second class.

---

Bounty edit

This is actually a very interesting question that got a partial answer by me. The problem with my answer is that, it works only for solid background color and doesn't work with CSS gradients or any other more specific parameter.

This script should be a 'must-have' in any jQuery developers library. So, I'm offering 150 rep to anyone, who can think of a way or find good resource, that can do this.

If your method (single jQuery plugin) works for all these examples, then you have won!

Examples: http://jsfiddle.net/4pYWD/

---

Modern days edit

Since this question was asked in 2011, when CSS transition, is commercial game was not an option. Then understand, why everything is focused on JS and not CSS, in this question. From these answers, I developed a JS script, that was at the time, perfect. Its not anymore, CSS transitions are the ultimate solution now, so the proper answer got re-accepted.

Answer 1

You can use css3 transitions to achieve that.

An example:

a {
    color: blue;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

a:hover {
    color:yellow;
}

You can check out this alive here.

The example was given with static colors, but you can use css3 gradients as well:

a {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}

a:hover {
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

Answer 2

http://jsfiddle.net/btleffler/MZ6T8/

Works in Chrome, Safari for Windows, and Opera. Firefox and IE have shoddy support for CSSRules objects, so the results are iffy at best. I'll keep working on it to see if I can fix the issues though.

The css styles need to be tweaked too. Since there's no background color assigned to the :hover selector on the last example, there's no background color on the new element.

If anyone has some ideas for this stuff I'd love to hear them.

---

EDIT: FIXED

http://jsfiddle.net/btleffler/JfPBS/

This one works better. I search through all the css rules for :hover selectors, then I save the CSS text associated with that rule, and the non :hover rule as a javascript object that can be plugged into $().css(). After that, I compute the actual "hover class" by using $.extend() to extend the hover class on to the normal class. This way, if there's no background defined in the :hover class, it will still have the background from the normal class.

Finally, I create an element, and position it directly under the original element, get rid of what makes CSS handle the hover, add my normal style to the original, and my computed hover style to the new element under it.

All we need to do after that is animate the opacity on mouse events. Simple!