我对jquery很新。我正在尝试使用jquery animate更改文本颜色。但我的代码不起作用。请任何人帮助我
<script>
$(p).hover(function(){
$(this).animate({"color":"red"})
})
</script>
答案 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 );
答案 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-.
});