JQuery - text color fades

Question

I can not find a simple solution to this problem.

I am trying to fade out when changing color for some text when there is an error when I click a button.

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

I can change the color, but it is instant. I want the color change to fade out.

Thanks guys!

Answer 1

If you add the jQuery user interface, they add support for color animations.

Read more at 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> 

Update: jQuery now offers a color plugin to enable only this feature, not including the entire jQuery-UI library.

Answer 2

You need to use a plugin, this is not part of the inline animation: https://github.com/jquery/jquery-color

Related question: jQuery animate backgroundColor

Answer 3

of course the .css call is instantaneous and fadeIn is just bound (launched after changing css)

try using animate

Answer 4

Perhaps this may help you:

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

Answer 5

You can animate css properties using jQuery.animate function, i.e.

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

BUT, you cannot revive the color, sorry. For this you need to use the plugin, see this answer for more details.

Also, if you are using jQuery UI then this is possible:

Note. The jQuery UI project extends the .animate () method to allow some non-numeric styles, such as animated colors. The project also includes mechanisms for defining animations through CSS classes, rather than individual attributes.

(from http://api.jquery.com/animate/ )

You have a sample here .

Answer 6

I found a way to change color and found this

fooobar.com/questions/20749 / ...

already a test and it works what i want :)