jQuery - 文本颜色淡入答案

【问题标题】：jQuery - text color fade injQuery - 文本颜色淡入
【发布时间】：2011-09-26 13:28:24
【问题描述】：

我找不到解决这个问题的简单方法。

当单击按钮出错时，我正在尝试淡化某些文本的颜色变化。

if (document.getElementById("username").value == ""){ //First Name      
    $("#login_error").text("Please enetr a username!").css('color', '#FF0000');     
    $("#username_label").css('color', '#FF0000');fadeIn(3000);
}

我可以改变颜色，但它是即时的。我想让颜色的变化慢慢消失。

谢谢各位！

【问题讨论】：

可能重复：stackoverflow.com/questions/6320578/…
是 ;第 3 行的 .css() 和 fadeIn() 之间有错字吗？如果没有，改成.css().fadeIn()

标签： jquery css animation

【解决方案1】：

如果您添加 jQuery UI，它们会添加对彩色动画的支持。

阅读http://jqueryui.com/demos/animate/了解详情。

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function(){
    $(".block").toggle(function() {
      $(this).animate({ color: "#FF0000" }, 1000);
    },function() {
      $(this).animate({ color: "#000000" }, 1000);
    });
  });
  </script>

更新： jQuery 现在提供了color plugin 来仅启用此功能，而不包括整个 jQuery-UI 库。

【讨论】：

很好，我不知道......但是小插件仍然比只为这个小任务包含整个 jQuery UI 更好。
你可以在jquery ui页面构建自定义下载，只包含UI Core和Effects Core
干杯。 $(this).animate({ color: "#FF0000" }, 1000);做这项工作！
很高兴听到这个消息！ -- 不要忘记接受你最喜欢的答案。
使用 raw.github.com/jquery/jquery-color/master/jquery.color.js 代替 jQuery UI

【解决方案2】：

你需要使用插件，它不是内置动画的一部分：https://github.com/jquery/jquery-color

相关问题：jQuery animate backgroundColor

【讨论】：

【解决方案3】：

当然 .css 调用是即时的，fadeIn 只是链接（在 css 更改后开始）

尝试使用animate

【讨论】：

【解决方案4】：

也许这可以帮助你：

http://docs.jquery.com/UI/Effects/Highlight

【讨论】：

【解决方案5】：

您可以使用 jQuery .animate 函数为 css 属性设置动画，即

$(this).animate({ height: 250 });

但是，您不能为颜色设置动画，抱歉。需要用到插件的，详情见this answer。

另外，如果您使用的是 jquery UI，那么它是可能的：

注意：jQuery UI 项目扩展了 .animate() 方法，允许对一些非数字样式（例如颜色）进行动画处理。该项目还包括通过 CSS 类而不是单个属性指定动画的机制。

（来自http://api.jquery.com/animate/）

你有样本here。

【讨论】：

【解决方案6】：

我找到了改变颜色的方法，找到了这个

https://stackoverflow.com/a/15234173/1128331

已经测试过了，它可以满足我的需求:)

【讨论】：