kvSmoothTransition 1.0

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

HTML

<h3>Examples:</h3>
<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>
<br /><br />
<div id="example-5">Example 5</div>

CSS

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

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

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

#example-5 {width: 248px; padding: 14px 0px 13px; background:...

JavaScript

/*
 * kvSmoothTransition, jQuery plugin
 *
 * @author: Kalle H. Väravas <[email protected]>
 * @date: 16/11/2011
 *
 * Originally made for http://stackoverflow.com/questions/6800950
 */
(function ($) {
    $.fn.kvSmoothTransition = function (options) {
        options = $.extend({
            showSpeed: 350,
            hideSpeed: 500,
            includeText: true
		}, options);
        
        return this.each(function (i, link) {
            
            var $this = $(this);
            var this_position = $this.position();
            var elms = {};
        
            $this.append(elms[i] = $('<span />').filter(function (index) {
                if (options['includeText']) {
                    $(this).html($this.html());
                }
                if ($this.attr('id')) {
                    $(this).attr('id', $this.attr('id'));
                }
                return true;
            }).addClass($this.attr('class') + ' hover').css({
                'display': 'block',
                'opacity': 0,
                'position': 'absolute',
                'top': this_position.top,
                'left': this_position.left,
                'width': $this.width(),
                'height': $this.height()
            }))
            .hover(function () {
                $(elms[i]).stop().animate({
                    'opacity': 1
                }, options['showSpeed']);
            }, function () {
                $(elms[i]).stop().animate({
                    'opacity': 0
                }, options['hideSpeed']);
            })
        
        });
    };
}) (jQuery);
$('.global').kvSmoothTransition();
$('#example-5').kvSmoothTransition({showSpeed: 400, hideSpeed: 300});