我试图在鼠标悬停时使用jQuery动画改变backgroundColor。
我检查了一些例子，我似乎有它是正确的，它与其他属性，如fontSize，但与backgroundColor我得到和“无效属性”js错误。 我正在使用的元素是div。
$(".usercontent").mouseover(function() {
$(this).animate({ backgroundColor: "olive" }, "slow");
});
什么好主意吗?
当前回答
如果你不想只使用jQuery核心功能来动画你的背景，试试这个:
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 : ''});
});
});
其他回答
试着使用它
-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
简单地添加以下片段下面的jquery脚本和享受:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
参见示例
更多信息参考
我也有同样的问题，并通过包含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;
}
如果你不想只使用jQuery核心功能来动画你的背景，试试这个:
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 : ''});
});
});
