jquery - 如何在 jquery animate 中更改文本颜色？

Question

我对 jquery 很陌生。我正在尝试使用 jquery animate 更改文本颜色。但是我的代码不起作用。请任何人帮助我

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

Answer 1

不使用任何额外的插件：我知道这个问题现在已经很老了，但这是为了帮助任何仍在寻找解决方案的人......这是一个不需要任何额外插件的解决方法。

jQuery css 改变颜色：

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

和 CSS 过渡来复制颜色变化时的动画效果：

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 simply acheive it with Jquery UI. After adding simply

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

http://jqueryui.com/animate/

Answer 3

做这个。

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

添加两个按钮。单击第二个按钮时，第一个按钮的前景色将发生变化。

<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

变色效果参考这里的JQuery脚本。

Answer 5

2019, use interpolator syntax, and rgb ranges 0 to 255. Good to animate any css number.

//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-. 
});