jQuery - 文字颜色淡入

Question

jQuery - 文字颜色淡入

4

我找不到一个简单的解决方案来解决这个问题。

当按钮点击出现错误时，我试图为一些文本淡入颜色变化。

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

我可以改变颜色，但是它是瞬间的。我想让颜色改变缓慢地淡入。

谢谢大家！

- Samuel Meddows

可能重复：http://stackoverflow.com/questions/6320578/can-i-fade-in-a-color-with-jquery - JMax

第三行中的.css()和fadeIn()之间的分号是打错了吗？如果不是，请将其更改为.css().fadeIn()。 - dnagirl

5个回答

1

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

相关问题：jQuery animate backgroundColor

- Shadow The Spring Wizard

0

您可以使用jQuery的.animate()函数来实现CSS属性的动画效果，例如：

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

但是，很抱歉您无法使用动画来改变颜色。如果需要这样做，您需要使用插件，请参见this answer了解详情。

另外，如果您正在使用jQuery UI，则可以实现：

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

(来自http://api.jquery.com/animate/)

您可以在此处查看示例here。

- Goran Obradovic

0

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

https://dev59.com/B3VC5IYBdhLWcg3ww0Lr#15234173

已经测试过了，它能够按照我的要求工作 :)

- user1128331

0

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

试试使用animate。

- Guard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blazemonger · Accepted Answer

如果您添加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提供了一个颜色插件，可以启用此功能而无需包含整个jQuery-UI库。