我试图在鼠标悬停时使用jQuery动画改变backgroundColor。
我检查了一些例子，我似乎有它是正确的，它与其他属性，如fontSize，但与backgroundColor我得到和“无效属性”js错误。 我正在使用的元素是div。
$(".usercontent").mouseover(function() {
$(this).animate({ backgroundColor: "olive" }, "slow");
});
什么好主意吗?
当前回答
在没有jQueryUI的情况下使用动画效果更改背景颜色:
selector.css({
backgroundColor: "#555",
transition: "background-color 1.8s"
});
其他回答
如果有人发现了这个。你最好使用jQuery UI版本，因为它可以在所有浏览器上运行。颜色插件在Safari和Chrome浏览器中存在问题。只是有时候有用。
Bitstorm拥有我见过的最好的jquery彩色动画插件。这是对jquery颜色项目的改进。它还支持rgba。
http://www.bitstorm.org/jquery/color-animation/
我也有同样的问题，并通过包含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>
为了达到理想的效果，我使用了CSS过渡和JQuery的组合;显然，不支持CSS过渡的浏览器不会动画，但它是一个轻量级的选项，适用于大多数浏览器，对我的要求是可接受的退化。
使用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;
}
ColorBlend插件完全是你想要的
http://plugins.jquery.com/project/colorBlend
这里是我的高亮代码
$("#container").colorBlend([{
colorList:["white", "yellow"],
param:"background-color",
cycles: 1,
duration: 500
}]);
