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.