JQuery动画文本颜色 [英] JQuery animate text color
问题描述
如何使用jQuery / jQuery UI为文本颜色设置动画。该文本目前是#000。当一个事件被触发时我想要文本颜色#F00然后在3秒内淡出回#000。
How do I animate text color with jQuery/jQuery UI. The text is currently #000. when an event is triggered I want the text color to go #F00 then fade back to #000 over 3 seconds.
我试过效果(使用高亮突出显示,{},3000)
但是在完成之前它不会重新触发效果,然后会在触发它的时间内继续执行效果...不是很有用为此。
I tried effect("highlight", {}, 3000)
with highlight but it doesn't re-trigger the effect until is completed and will then continue doing it for the amount of time it was triggered... not really useful for this.
任何想法?
C
更新:
这就是我现在所拥有的:
this is what I have now:
$("input:text[name=size_w]").keyup(function () {
var value = ($("input:text[name=size_w]").val() == "") ? "null" : $("input:text[name=size_w]").val();
$("#width_emb").text(value).css({ color: "red" }).animate({ color: "black" }, 3000);
}).keyup();
但它仍然没有按照我需要的方式工作。在动画结束之前,我无法重新触发初始颜色更改。如果在3秒之前重新触发事件,我需要放弃动画再次启动它。
But it's still not working the way I need. I can't re-trigger the initial color change until the animation is finished. if the event is re-triggered before the 3 seconds is u I need to abandon the animation as start it again.
推荐答案
你需要JqueryUI它增加了对颜色动画的支持
You need JqueryUI it adds support for colour animation
http:/ /jqueryui.com/demos/animate/
来自JQueryUI网站:
From the JQueryUI site:
jQuery UI效果核心扩展了animate函数,以便能够为颜色设置动画。它被类转换功能大量使用,它可以为以下属性设置颜色:
The jQuery UI effects core extends the animate function to be able to animate colors as well. It's >heavily used by the class transition feature and it's able to color animate the following properties:
- backgroundColor
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- 颜色
- outlineColor
- backgroundColor
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- color
- outlineColor
响应更新问题如果你是动画的中途而你希望它停止或重新启动,如果再次点击你可以调用.stop()
http://api.jquery.com/stop/
您也可以使用它来清除任何排队的动画。
In response to the updated question if you are halfway through an animation and you want it to stop or restart if you click again you can call .stop() http://api.jquery.com/stop/ You can also use this to clear any queued animations.
这篇关于JQuery动画文本颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!