jQuery效果之jQuery Color animation 色彩动画扩展

<script src='jquery.animate-colors.js'></script>

$('#demodiv').animate({ color:'#E4D8B8' })
$('#demodiv').animate({ backgroundColor:'#400101' })
$('#demodiv').animate({ borderBottomColor:'#00346B' })
$('#demodiv').animate({ borderColor:'#F2E2CE' })
$('#demodiv').animate({ color:'rgba(42,47,76,0.1)' })

(function($) {
    /**
     * Check whether the browser supports RGBA color mode.
     *
     * Author Mehdi Kabab <http://pioupioum.fr>
     * @return {boolean} True if the browser support RGBA. False otherwise.
     */
     isRGBACapable() {
        var $script = $('script:first'),color = $script.css('color'false;
        if (/^rgba/.test(color)) {
            result = true;
        } else {
            try {
                result = ( color != $script.css('color','rgba(0,0.5)').css('color') );
                $script.css('color',color);
            } catch (e) {
            }
        }

        return result;
    }

    $.extend(: isRGBACapable()
        }
    });

    var properties = ['color','backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','outlineColor'];
    $.each(properties,(i,property) {
        $.Tween.propHooks[ property ] = {
            get: (tween) {
                 $(tween.elem).css(property);
            },set: var style = tween.elem.style;
                var p_begin = parseColor($(tween.elem).css(property));
                var p_end = parseColor(tween.end);
                tween.run = (progress) {
                    style[property] = calculateColor(p_begin,p_end,progress);
                }
            }
        }
    });

    // borderColor doesn't fit in standard fx.step above.
    $.Tween.propHooks.borderColor = {
        set: (tween) {
             tween.elem.style;
             [];
            var borders = properties.slice(2,6);  All four border properties
            $.each(borders, parseColor($(tween.elem).css(property));
            });
             parseColor(tween.end);
            tween.run = (progress) {
                $.each(borders,property) {
                    style[property] = calculateColor(p_begin[property],progress);
                });
            }
        }
    }

     Calculate an in-between color. Returns "#aabbcc"-like string.
     calculateColor(begin,end,pos) {
        var color = 'rgb' + ($.support['rgba'] ? 'a' : '') + '('
                + parseInt((begin[0] + pos * (end[0] - begin[0])),10) + ','
                + parseInt((begin[1] + pos * (end[1] - begin[1])),'
                + parseInt((begin[2] + pos * (end[2] - begin[2])),10);
        if ($.support['rgba']) {
            color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);
        }
        color += ')' color;
    }

     Parse an CSS-syntax color. Outputs an array [r,g,b]
     parseColor(color) {
        var match,triplet;

         Match #aabbcc
        if (match = /#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(color)) {
            triplet = [parseInt(match[1],16),parseInt(match[2],parseInt(match[3],1];

             Match #abc
        } else if (match = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/ Match rgb(n,n,n)
        } if (match = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) {
            triplet = [parseInt(match[1]),parseInt(match[2]),parseInt(match[3]),1)">];

        } if (match = /rgba\(\s*([0-9]{1,\s*([0-9\.]*)\s*\)/])];

             No browser returns rgb(n%,n%,n%),so little reason to support this format.
        }
         triplet;
    }
})(jQuery);