jQuery的animationbackgroundColor
我试图在mouseover上使用jQuery在backgroundColor中更改animation。
我已经检查了一些例子，我似乎是正确的，它与其他属性，如fontSize，但与backgroundColor我得到和“无效属性”JS错误。 我正在使用的元素是一个div。
$(".usercontent").mouseover(function() { $(this).animate({ backgroundColor: "olive" }, "slow"); }); 有任何想法吗？
颜色插件只有4kb比UI库便宜得多。 当然，你会想使用一个体面的版本的插件，而不是一些越野车旧的东西 ，不处理Safari和崩溃时，过渡太快。 由于不提供缩小版本，您可能会喜欢testing各种压缩机，并制作自己的最小版本。 在这种情况下，YUI获得最好的压缩，只需要2317个字节，因为它非常小 – 这里是：
(function (d) { d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) { d.fx.step[e] = function (g) { if (!g.colorInit) { g.start = c(g.elem, e); g.end = b(g.end); g.colorInit = true } g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")" } }); function b(f) { var e; if (f && f.constructor == Array && f.length == 3) { return f } if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) { return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])] } if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) { return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55] } if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) { return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)] } if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) { return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)] } if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) { return a.transparent } return a[d.trim(f).toLowerCase()] } function c(g, e) { var f; do { f = d.css(g, e); if (f != "" && f != "transparent" || d.nodeName(g, "body")) { break } e = "backgroundColor" } while (g = g.parentNode); return b(f) } var a = { aqua: [0, 255, 255], azure: [240, 255, 255], beige: [245, 245, 220], black: [0, 0, 0], blue: [0, 0, 255], brown: [165, 42, 42], cyan: [0, 255, 255], darkblue: [0, 0, 139], darkcyan: [0, 139, 139], darkgrey: [169, 169, 169], darkgreen: [0, 100, 0], darkkhaki: [189, 183, 107], darkmagenta: [139, 0, 139], darkolivegreen: [85, 107, 47], darkorange: [255, 140, 0], darkorchid: [153, 50, 204], darkred: [139, 0, 0], darksalmon: [233, 150, 122], darkviolet: [148, 0, 211], fuchsia: [255, 0, 255], gold: [255, 215, 0], green: [0, 128, 0], indigo: [75, 0, 130], khaki: [240, 230, 140], lightblue: [173, 216, 230], lightcyan: [224, 255, 255], lightgreen: [144, 238, 144], lightgrey: [211, 211, 211], lightpink: [255, 182, 193], lightyellow: [255, 255, 224], lime: [0, 255, 0], magenta: [255, 0, 255], maroon: [128, 0, 0], navy: [0, 0, 128], olive: [128, 128, 0], orange: [255, 165, 0], pink: [255, 192, 203], purple: [128, 0, 128], violet: [128, 0, 128], red: [255, 0, 0], silver: [192, 192, 192], white: [255, 255, 255], yellow: [255, 255, 0], transparent: [255, 255, 255] } })(jQuery);
我有同样的问题，并通过包括jQuery UI修复它。 这是完整的脚本：
<!-- include Google's AJAX API loader --> <script src="http://www.google.com/jsapi"></script> <!-- load JQuery and UI from Google (need to use UI to animate colors) --> <script type="text/javascript"> google.load("jqueryui", "1.5.2"); </script> <script type="text/javascript"> $(document).ready(function() { $('#menu ul li.item').hover( function() { $(this).stop().animate({backgroundColor:'#4E1402'}, 300); }, function () { $(this).stop().animate({backgroundColor:'#943D20'}, 100); }); }); </script>
用CSS3-Transitions做到这一点。 支持是伟大的（所有现代浏览器，甚至IE）。 用罗盘和SASS这个很快就完成了：
#foo {background:red; @include transition(background 1s)} #foo:hover {background:yellow}
纯CSS：
#foo { background:red; -webkit-transition:background 1s; -moz-transition:background 1s; -o-transition:background 1s; transition:background 1s } #foo:hover {background:yellow}
我写了一篇关于这个话题的德文文章： http : //www.solife.cc/blog/animation-farben-css3-transition.html
Bitstorm有我见过的最好的jQuery颜色animation插件。 这是对jQuery颜色项目的改进。 它也支持rgba。
你可以使用jQuery UI来添加这个function。 你可以抓住你所需要的，所以如果你想要animation的颜色，所有你必须包括下面的代码。 我得到如果从最新的jQuery UI（目前1.8.14）
/******************************************************************************/ /****************************** COLOR ANIMATIONS ******************************/ /******************************************************************************/ // override the animation for color styles $.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'borderColor', 'color', 'outlineColor'], function(i, attr) { $.fx.step[attr] = function(fx) { if (!fx.colorInit) { fx.start = getColor(fx.elem, attr); fx.end = getRGB(fx.end); fx.colorInit = true; } fx.elem.style[attr] = 'rgb(' + Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' + Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' + Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')'; }; }); // Color Conversion functions from highlightFade // By Blair Mitchelmore // http://jquery.offput.ca/highlightFade/ // Parse strings looking for color tuples [255,255,255] function getRGB(color) { var result; // Check if we're already dealing with an array of colors if ( color && color.constructor == Array && color.length == 3 ) return color; // Look for rgb(num,num,num) if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)]; // Look for rgb(num%,num%,num%) if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55]; // Look for #a0b1c2 if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)]; // Look for #fff if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)]; // Look for rgba(0, 0, 0, 0) == transparent in Safari 3 if (result = /rgba\(0, 0, 0, 0\)/.exec(color)) return colors['transparent']; // Otherwise, we're most likely dealing with a named color return colors[$.trim(color).toLowerCase()]; } function getColor(elem, attr) { var color; do { color = $.curCSS(elem, attr); // Keep going until we find an element that has color, or we hit the body if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") ) break; attr = "backgroundColor"; } while ( elem = elem.parentNode ); return getRGB(color); };
用YUI压缩后只有1.43kb：
$.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","borderColor","color","outlineColor"],function(b,a){$.fx.step[a]=function(c){if(!c.colorInit){c.start=getColor(c.elem,a);c.end=getRGB(c.end);c.colorInit=true}c.elem.style[a]="rgb("+Math.max(Math.min(parseInt((c.pos*(c.end[0]-c.start[0]))+c.start[0],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[1]-c.start[1]))+c.start[1],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[2]-c.start[2]))+c.start[2],10),255),0)+")"}});function getRGB(b){var a;if(b&&b.constructor==Array&&b.length==3){return b}if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b)){return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)]}if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b)){return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55]}if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b)){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b)){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}if(a=/rgba\(0, 0, 0, 0\)/.exec(b)){return colors.transparent}return colors[$.trim(b).toLowerCase()]}function getColor(c,a){var b;do{b=$.curCSS(c,a);if(b!=""&&b!="transparent"||$.nodeName(c,"body")){break}a="backgroundColor"}while(c=c.parentNode);return getRGB(b)};
你也可以使用CSS3过渡animation颜色，但只有现代浏览器支持。
a.test { color: red; -moz-transition-property: color; /* FF4+ */ -moz-transition-duration: 1s; -webkit-transition-property: color; /* Saf3.2+, Chrome */ -webkit-transition-duration: 1s; -o-transition-property: color; /* Opera 10.5+ */ -o-transition-duration: 1s; -ms-transition-property: color; /* IE10? */ -ms-transition-duration: 1s; transition-property: color; /* Standard */ transition-duration: 1s; } a.test:hover { color: blue; }
使用速记属性：
/* shorthand notation for transition properties */ /* transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */ a.test { color: red; -moz-transition: color 1s; -webkit-transition: color 1s; -o-transition: color 1s; -ms-transition: color 1s; transition: color 1s; } a.test { color: blue; }
不像常规的JavaScript转换，CSS3转换是硬件加速，因此更顺畅。 您可以使用Modernizr来查看浏览器是否支持CSS3转换，如果没有，那么您可以使用jQuery作为后备：
if ( !cssTransitions() ) { $(document).ready(function(){ $(".test").hover(function () { $(this).stop().animate({ backgroundColor: "red" },500) }, function() { $(this).stop().animate({ backgroundColor: "blue" },500)} ); }); }
记得在开始一个新的animation之前使用stop（）来停止当前的animation，否则当你过快地传递这个元素的时候，这个效果会一直闪烁。
你可以使用2个div：
你可以把一个克隆放在它的顶部，淡入淡出克隆。
淡入淡出后，用新的bg恢复原始。
$(function(){ var $mytd = $('#mytd'), $elie = $mytd.clone(), os = $mytd.offset(); // Create clone w other bg and position it on original $elie.toggleClass("class1, class2").appendTo("body") .offset({top: os.top, left: os.left}).hide(); $mytd.mouseover(function() { // Fade original $mytd.fadeOut(3000, function() { $mytd.toggleClass("class1, class2").show(); $elie.toggleClass("class1, class2").hide(); }); // Show clone at same time $elie.fadeIn(3000); }); });
jsFiddle的例子
.toggleClass()
.offset()
.fadeIn()
.fadeOut()
任何人发现这一点。 你最好使用jQuery UI版本，因为它适用于所有的浏览器。 颜色插件与Safari和Chrome有问题。 它只有有时工作。
我使用了CSS转换与JQuery的组合来获得所需的效果; 显然，不支持CSS转换的浏览器不会生成animation，但是对于大多数浏览器和我的要求来说，这是一个轻量级的选项，可以接受的降级。
jquery改变背景颜色：
$('.mylinkholder a').hover( function () { $(this).css({ backgroundColor: '#f0f0f0' }); }, function () { $(this).css({ backgroundColor: '#fff' }); } );
使用转换的CSS淡入淡出背景色
.mylinkholder a { transition: background-color .5s ease-in-out; -moz-transition: background-color .5s ease-in-out; -webkit-transition: background-color .5s ease-in-out; -o-transition: background-color .5s ease-in-out; }
现在jQuery颜色插件支持以下命名的颜色：
aqua:[0,255,255], azure:[240,255,255], beige:[245,245,220], black:[0,0,0], blue:[0,0,255], brown:[165,42,42], cyan:[0,255,255], darkblue:[0,0,139], darkcyan:[0,139,139], darkgrey:[169,169,169], darkgreen:[0,100,0], darkkhaki:[189,183,107], darkmagenta:[139,0,139], darkolivegreen:[85,107,47], darkorange:[255,140,0], darkorchid:[153,50,204], darkred:[139,0,0], darksalmon:[233,150,122], darkviolet:[148,0,211], fuchsia:[255,0,255], gold:[255,215,0], green:[0,128,0], indigo:[75,0,130], khaki:[240,230,140], lightblue:[173,216,230], lightcyan:[224,255,255], lightgreen:[144,238,144], lightgrey:[211,211,211], lightpink:[255,182,193], lightyellow:[255,255,224], lime:[0,255,0], magenta:[255,0,255], maroon:[128,0,0], navy:[0,0,128], olive:[128,128,0], orange:[255,165,0], pink:[255,192,203], purple:[128,0,128], violet:[128,0,128], red:[255,0,0], silver:[192,192,192], white:[255,255,255], yellow:[255,255,0]
我喜欢使用delay（）来完成这个，下面是一个例子：
jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);
这可以被一个函数调用，其中“元素”是元素类/名称/等。 元素会立即出现＃FCFCD8背景，保持一秒钟，然后淡入#EFEAEA。
我做了一个支持rgba的版本，基于github版本。 但是，它不会在IE浏览器中工作，因为它只是做rgba。 http://dl.dropbox.com/u/57502/jquery.color.js
我偶然发现了同样的问题，但有以下问题：
- 我不能包含一个额外的jQuery插件文件与我目前的设置。
- 我不习惯粘贴大量的代码，我没有时间阅读和validation。
- 我没有访问的CSS。
- 我几乎没有时间实施（这只是一个pipe理页面的视觉改进）
有了上面这个几乎排除了每一个答案。 考虑到我的颜色淡化非常简单，我用下面的快速黑客来代替：
element .css('color','#FF0000') ; $('<div />') .css('width',0) .animate( {'width':100}, { duration: 3000, step:function(now){ var v = (255 - 255/100 * now).toString(16); v = (v.length < 2 ? '0' : '') + v.substr(0,2); element.css('color','#'+v+'0000'); } } ) ;
上面创build了一个永远不会放在文档stream中的临时div。 然后，我使用jQuery的内置animationanimation元素的数字属性 – 在这种情况下， width – 可以表示一个百分比（0至100）。 然后，使用step函数，我用一个简单的hexcacluation将这个数字animation转换成文本颜色。
用setInterval也可以达到同样的效果，但是通过使用这个方法，你可以从jQuery的animation方法中受益 – 比如.stop() – 你可以使用easing和duration 。
显然这只是用于简单的颜色淡化，对于更复杂的颜色转换，您需要使用上面的答案之一 – 或者编写自己的颜色淡入淡出的math:)
只需在下面的代码段中添加你的jQuery脚本，并享受：
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
看例子
参考更多信息
ColorBlend插件正是你想要的
http://plugins.jquery.com/project/colorBlend
这是我的重点代码
$("#container").colorBlend([{ colorList:["white", "yellow"], param:"background-color", cycles: 1, duration: 500 }]);
如果你不想使用核心jQueryfunction来animation你的背景，试试这个：
jQuery(".usercontent").mouseover(function() { jQuery(".usercontent").animate({backgroundColor:'red'}, 'fast', 'linear', function() { jQuery(this).animate({ backgroundColor: 'white' }, 'normal', 'linear', function() { jQuery(this).css({'background':'none', backgroundColor : ''}); }); });
试试这个：
(function($) { var i = 0; var someBackground = $(".someBackground"); var someColors = [ "yellow", "red", "blue", "pink" ]; someBackground.css('backgroundColor', someColors[0]); window.setInterval(function() { i = i == someColors.length ? 0 : i; someBackground.animate({backgroundColor: someColors[i]}, 3000); i++; }, 30); })(jQuery);
你可以在这里预览示例： http : //jquerydemo.com/demo/jquery-animate-background-color.aspx
奇怪的是，你可以使用CSS3过渡animation，但不能用jQuery来做。 这是可惜:(
在Fiddle上的mouseover比较（包括最新的jQuery颜色插件的例子）上的backgroundColoranimation效果
尝试使用它
-moz-transition: background .2s linear; -webkit-transition: background .2s linear; -o-transition: background .2s linear; transition: background .2s linear;
试试这个：
jQuery(".usercontent").hover(function() { jQuery(this).animate({backgroundColor:"pink"}, "slow"); },function(){ jQuery(this).animate({backgroundColor:"white"}, "slow"); });
修改后的效果方式：
jQuery(".usercontent").hover(function() { jQuery(this).fadeout("slow",function(){ jQuery(this).animate({"color","yellow"}, "slow"); }); });
