悬停()背景颜色问题
$('li > a').hover(
function(){
$(this).animate({
backgroundColor: '#2a639a',
color: '#fff'
},300).corner('5px');
},
function(){
$(this).animate({
background: 'transparent',
color: '#444'
},300);
}
);
背景有什么问题：“透明”？ 变回白色，不透明
$('li > a').hover(
function(){
$(this).animate({
backgroundColor: '#2a639a',
color: '#fff'
},300).corner('5px');
},
function(){
$(this).animate({
background: 'transparent',
color: '#444'
},300);
}
);
What's wrong with background: 'transparent'?
turns back white, not transparent
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
需要注意的重要一点：CSS 中的透明与 0% 不透明度不同。
不透明度可以分级，而透明则可以打开或关闭。因此，您不能将透明动画设置为纯色或从纯色开始动画并期望平滑过渡。如果您尝试，大多数浏览器都会将其视为黑色或白色以用于动画目的，我认为这就是您在这里看到的。
相反，对不透明度进行动画处理可能会给您带来更平滑的过渡，尽管它当然是不同的（对于初学者来说，它会影响整个元素，而不仅仅是背景，而且还需要考虑浏览器兼容性问题）。
Important thing to note: Transparent in CSS is different from 0% Opacity.
Opacity can be graduated, whereas tranparent is either on or off. Therefore you cannot animate transparent to or from a solid colour and expect a smooth transition. If you try, most browsers will treat it as either black or white for the purposes for the animation, which I think is what you're seeing here.
Animating the opacity instead may give you a smoother transition, though of course it is different (for starters it affects the whole element, not just the background, plus there are browser compatibility issues to consider).
您无法为背景属性设置动画。
也许您可以使用精灵并使用 BackgroundPosition 插件
You can't animate the background property.
Maybe you can use a sprite and use the BackgroundPosition Plugin
仅使用 jQuery 不可能为背景颜色设置动画。 jQuery 仅支持 jQuery-API 中所述的数字值 您可以使用 jQuery UI 为背景颜色设置动画。
It's impossible to animate the background-color only with jQuery. jQuery only supports numeric values as stated in the jQuery-API You can use jQuery UI to animate the background-color.