如何在jquery动画中更改文本颜色?

时间:2013-06-01 11:01:52

标签: jquery html

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

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

5 个答案:

答案 0 :(得分:11)

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

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

答案 1 :(得分:2)

您可以使用 Jquery UI 简单地实现它。简单地添加后

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

http://jqueryui.com/animate/

答案 2 :(得分:0)

这样做。

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

答案 3 :(得分:0)

请参阅JQuery脚本here了解换色效果。

答案 4 :(得分:0)

2019,使用插值器语法,并且rgb的范围为0到255。可以为任何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-. 
});