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!

possible duplicate: http://stackoverflow.com/questions/6320578/can-i-fade-in-a-color-with-jquery — JMax, Sep 26 '11 at 13:31
is the ; between .css() and fadeIn() in line 3 a typo? If not, change it to `.css().fadeIn()` — dnagirl, Sep 26 '11 at 13:32

Blazemonger · Answer 1 · 2013-02-11T16:29:11.807

9

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.

edited Feb 11 '13 at 16:29

answered Sep 26 '11 at 13:31

Blazemonger

90,923
26
142
180

1

Nice, didn't know that.. but small plugin is still better than including the whole jQuery UI just for this small task. – Shadow The GPT Wizard Sep 26 '11 at 13:32
1

You can build custom download at jquery ui page, include only UI Core and Effects Core – Goran Obradovic Sep 26 '11 at 13:36
Cheers. $(this).animate({ color: "#FF0000" }, 1000); does the job! – Samuel Meddows Sep 26 '11 at 14:05
Glad to hear it! -- don't forget to accept your favorite answers. – Blazemonger Sep 28 '11 at 14:08
1

use https://raw.github.com/jquery/jquery-color/master/jquery.color.js instead of jQuery UI – Luke Stanley Jul 18 '12 at 04:20

score 1 · Answer 2 · edited May 23 '17 at 11:45

1

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

edited May 23 '17 at 11:45

Community

1
1

answered Sep 26 '11 at 13:31

Shadow The GPT Wizard

66,030
26
140
208

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

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 :)

edited May 23 '17 at 10:28

Community

1
1

answered Sep 28 '13 at 08:34

user1128331

707
4
10
20

score 0 · Answer 4 · answered Sep 26 '11 at 13:31

0

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

try using animate

answered Sep 26 '11 at 13:31

Guard

6,816
4
38
58

score 0 · Answer 5 · edited May 23 '17 at 12:15

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.

jQuery - text color fade in

5 Answers5

Linked