jQuery - text color fade in

Question

I can't find a simple solution to this problem.

I am trying to fade in a color change for some text when there is an error from a button click.

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 get the color to change but it is instant. I am wanting to get the change of colour to fade in slowly.

Thanks Guys!

Answer 1

If you add jQuery UI, they added support for color animations.

Read http://jqueryui.com/demos/animate/ for details.

  <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 without including the entire jQuery-UI library.

Answer 2

of course .css call is instant, and fadeIn is just chained (started after css is changed)

try using animate

Answer 3

I find the method to change the color and found this

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

already test and it work what I want to :)

Answer 4

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

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

BUT, you cannot animate color, sorry. For that you need to use plugin, see this answer for details.

Also, if you are using jquery UI, then it is possible:

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

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

You have sample here.

Answer 5

Maybe this could help you:

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

Answer 6

You need to use plugin, it's not part of the built in animation: https://github.com/jquery/jquery-color

Related question: jQuery animate backgroundColor