JQuery动画文本颜色 [英] JQuery animate text color

查看:66
本文介绍了JQuery动画文本颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何使用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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆