How to change text color in jquery animation?

Question

I am very new to jquery. I am trying to change the color of text using jquery animate. But my code is not working. Please help me

<script> $(p).hover(function(){ $(this).animate({"color":"red"}) }) </script> 

Answer 1

Without using any additional plugin: I know this question is quite old, but it will help anyone who is still looking for a solution ... here is a workaround without the need for any additional plugin.

jQuery css to change color:

 $("p").hover(function(){ $(this).css("color","red"); }) 

and a CSS transition to replicate the animation effect when the color changes:

 p { color: black; -webkit-transition: color 0.4s ease; -moz-transition: color 0.4s ease; -o-transition: color 0.4s ease; transition: color 0.4s ease; } 

Answer 2

You can just get it using the jQuery UI . After adding just

 $( "#effect" ).animate({ backgroundColor: "#aa0000", color: "#fff", width: 500 }, 1000 ); 

http://jqueryui.com/animate/

Answer 3

Do it.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 

Add two buttons. The prevalence of the first button will change when the second button is pressed.

 <input type="button" id="bt" value="Change My Color" /> <input type="button" id="bt1" value="Change the Color" /> <script> $('#bt1').click(function() { $('#bt').animate({ color: 'red' }, 500); }); </script> 

Answer 4

Refer to the jQuery script here for a color change.

Answer 5

2019, use interpolator syntax and rgb ranges from 0 to 255. Good for animating any number of CSS.

 //changes txt color from black to white, then white to red, then red to blue. $({'r':0,'g':0,'b':0}).animate({'r':255,'g':255,'b':255},{queue:false,duration:3000, easing:'swing', step: function(now) { nx.ui.txtSection.css('color','rgb('+this.r+','+this.g+','+this.b+')'); }, complete:function(){ $({'r':255,'g':255,'b':255}).animate({'r':255,'g':0,'b':0},{queue:false,duration:3000, easing:'swing', step: function(now) { nx.ui.txtSection.css('color','rgb('+this.r+','+this.g+','+this.b+')'); }, complete:function(){ $({'r':255,'g':0,'b':0}).animate({'r':0,'g':0,'b':255},{queue:false,duration:3000, easing:'swing', step: function(now) { nx.ui.txtSection.css('color','rgb('+this.r+','+this.g+','+this.b+')'); }, complete:function(){ } //NEXT-SUB-SEQUENCE-. }); } //NEXT-SUB-SEQUENCE-. }); } //NEXT-SUB-SEQUENCE-. }); //Here is the minimum pattern... worth learning to easily animate any css-. $({'r':0,'g':0,'b':0}).animate({'r':0,'g':255,'b':0},{queue:false,duration:3000, easing:'swing', step: function(now) { nx.ui.txtSection.css('color','rgb('+this.r+','+this.g+','+this.b+')'); }, complete:function(){ } //NEXT-SUB-SEQUENCE-. });