Question

我无法找到解决此问题的简单方法。

当按钮点击发生错误时，我正试图淡化某些文字的颜色变化。

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

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

谢谢大家！

Answer 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库。

Answer 2

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

相关问题：jQuery animate backgroundColor

Answer 3

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

尝试使用animate

Answer 4

也许这可以帮到你：

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

Answer 5

您可以使用jQuery .animate函数（即

）为css属性设置动画

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

但是，你不能动画颜色，抱歉。为此您需要使用插件，有关详细信息，请参阅this answer。

此外，如果您使用的是jquery UI，则可以：

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

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

您有样本here。

Answer 6

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

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

已经测试并且它可以运行我想要的东西：）

jQuery - 文本颜色淡入

6 个答案: