JQuery 动画文本颜色

Question

如何使用 jQuery/jQuery UI 为文本颜色设置动画。文本当前为#000。当事件被触发时，我希望文本颜色变为 #F00，然后在 3 秒内淡回 #000。

我尝试了 effect("highlight", {}, 3000) 并突出显示，但它不会重新触发效果，直到完成为止，然后将继续执行它所需的时间被触发...对此不太有用。

有什么想法吗？

C

更新:

这就是我现在拥有的:

$("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 秒之前重新触发，我需要放弃动画并再次启动它。

Answer 1

您需要 JqueryUI，它添加了对彩色动画的支持

http://jqueryui.com/demos/animate/

来自 JQueryUI 站点:

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
• color
• outlineColor

为了回答更新的问题，如果您在动画进行到一半时希望动画停止或在再次单击时重新启动，则可以调用 .stop() http://api.jquery.com/stop/ 您还可以使用它来清除任何排队的动画。