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

http://stackoverflow.com/questions/6800950/smooth-transition-between-two-class-and-classhover

HTML

<div id="example-1" class="global">Example 1</div>

<br /><br />

<div id="example-2" class="global">Example 2</div>

<br /><br />

<div id="example-3" class="global">Example 3</div>

<br /><br />

<div id="example-4" class="global">Example 4</div>

CSS

.global {padding: 5px; display: inline-block; cursor: pointer;}

#example-1 {border: 2px dotted red;}
    #example-1:hover {border: 2px solid black;}

#example-2 {background: green;}
    #example-2:hover {background: blue;}

#example-3 {background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); background: linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);}
#example-3:hover {background: #cb60b3; background: -moz-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#c146a1), color-stop(51%,#a80077), color-stop(100%,#db36a4)); background: -webkit-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); background: -o-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); background: -ms-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0); background: linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);}

#example-4 {background: silver; color: blue;}
    #example-4:hover {color: green;}

JavaScript

/*
    Remember, the switch has to be smooth.
    Kind of like this http://jsfiddle.net/hobobne/uRJWG/

    However, yet again, it should be simple to apply.. maybe something like this:
    $('example-1').SmoothTransition();
*/