颜色动画jQuery的问题

Posted 2023-05-08

【中文标题】颜色动画jQuery的问题

【英文标题】：Issue with color animate jQuery

【发布时间】：2013-01-06 11:40:14

【问题描述】：

我不太确定这里有什么问题。我已经包含了 jQuery UI，这样我就有了颜色兼容性。

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery-ui-1.10.0.custom.js"></script>

我之前也尝试过使用 jQuery 颜色插件。

我想更改字体颜色，但我的代码似乎不起作用。我添加了 backgroundColor 来测试它，它可以工作。

如果您有任何想法为什么它不起作用，请告诉我。

$('.menu-item').mouseover(function() 
  $(this).animate(
    color: '#fff',
    backgroundColor: '#000000',
  , 500, function(     
  ) 
  );
);

$('.menu-item').mouseleave(function() 
  $(this).animate(
    color: '#fff',
    backgroundColor: '#ffffff',
  , 500, function(
  ) 
  );
);

【问题讨论】：

如果您不必为此支持 IE9-，只需使用过渡

对我来说似乎很好 jsfiddle.net/hAw5z 不过你两次都动画成白色，所以它只动画第一次。

【参考方案1】：

它不起作用，因为在 mouseleave 上，您没有将字体颜色设置回黑色，因此它不可见 试试这个，它工作正常。

$('div').mouseover(function() 
  $(this).animate(
  color: '#fff',
  backgroundColor: '#000000',
, 500, function(     
    ) 
   );
);

$('div').mouseleave(function() 
  $(this).animate(
  color: '#000',
  backgroundColor: '#ffffff',
, 500, function(
  ) 
  );
);

check fiddle

【参考方案2】：

我意识到我需要将目标更改为 '.menu-item' 到 '.menu-item a'

一旦我添加了“a”并更改了字体颜色，它就完美地工作了。

感谢 Explosion Pills 和 James Montagne。我也将使用你链接到 James 的那个网站。