我试图在鼠标悬停时使用jQuery动画改变backgroundColor。
我检查了一些例子，我似乎有它是正确的，它与其他属性，如fontSize，但与backgroundColor我得到和“无效属性”js错误。 我正在使用的元素是div。
$(".usercontent").mouseover(function() {
$(this).animate({ backgroundColor: "olive" }, "slow");
});
什么好主意吗?
当前回答
简单地添加以下片段下面的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
}]);
Bitstorm拥有我见过的最好的jquery彩色动画插件。这是对jquery颜色项目的改进。它还支持rgba。
http://www.bitstorm.org/jquery/color-animation/
如果有人发现了这个。你最好使用jQuery UI版本，因为它可以在所有浏览器上运行。颜色插件在Safari和Chrome浏览器中存在问题。只是有时候有用。
试着使用它
-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
试试这个:
(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
