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