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);
}