jQuery效果之jQuery Color animation 色彩动画扩展
jQuery 的动画方法(animate)支持各种属性的过渡,但是默认并不支持色彩的过渡,该插件正是来补足这一点!
PS: 该插件支持 RGBA 颜色的过渡,但是请注意,IE8以下的版本不支持 RGBA 颜色。
- 支持以下属性:
- color
- backgroundColor
- borderColor
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- outlineColor
使用方法:
载入 JavaScript 文件
首页页面中引入你的JQ版本,然后引入下面的插件代码:
@H_
301_44@
<script src='jquery.animate-colors.js'></script>
调用方式:
@H_
301_44@
$('#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)' })
下面贴一下不同的jquery版本,使用该插件的版本不一样,如下:
jQuery Animate colors (适用于 jQuery 1.8 以上版本):《下载地址》
jQuery Animate colors (适用于 jQuery 1.7.2 以下版本):《下载地址》
这儿贴一下适用于jquery1.8以上版本的源码:
@H_
301_44@
(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);