颜色动画jQuery的问题答案

【问题标题】：Issue with color animate jQuery颜色动画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 不过你两次都动画成白色，所以它只动画第一次。

标签： jquery jquery-ui jquery-plugins jquery-animate jquery-color

【解决方案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 的那个网站。

【讨论】：