hover（）backgroundColor问题

Question

$('li > a').hover(
  function(){
   $(this).animate({
    backgroundColor: '#2a639a',
    color: '#fff'
   },300).corner('5px');
  },
  function(){
   $(this).animate({
    background: 'transparent',
    color: '#444'
   },300);
  }
 );

背景有什么问题：'透明'？ 转回白色，不透明

Answer 1

需要注意的重要事项：CSS中的透明与0％不透明度不同。

不透明度可以渐变，而透明度可以打开或关闭。因此，您无法为纯色或透明色设置透明动画并期望平滑过渡。如果您尝试，大多数浏览器会将其视为黑色或白色，以用于动画目的，我认为这就是您在这里看到的。

设置不透明度的动画可能会让你的过渡更平滑，但当然它是不同的（对于初学者来说它会影响整个元素，而不仅仅是背景，还有需要考虑的浏览器兼容性问题）。

Answer 2

您无法为背景属性设置动画。

也许您可以使用精灵并使用BackgroundPosition Plugin

Answer 3

仅使用jQuery动画背景颜色是不可能的。 jQuery仅支持所述的数值in the jQuery-API您可以使用jQuery UI为背景颜色设置动画。