title: Smooth transition between two (class) and (class):hover
body: <p>Is there a script/way, that makes normal CSS <code>:hover</code> more smooth?</p>
  
  <p>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: <code>$('.someclass').SmoothTransition();</code> and it would automatically use the <code>.someclass:hover</code> as the second class.</p>
  
  <hr />
  
  <p><strong>Bounty edit</strong></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>If your method (single jQuery plugin) works for all these examples, then you have won!</p>
  
  <p><strong>Examples: <a href="http://jsfiddle.net/4pYWD/" rel="nofollow">http://jsfiddle.net/4pYWD/</a></strong></p>
  
  <hr />
  
  <p><strong>Modern days edit</strong></p>
  
  <p>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.</p>