jQuery褪色发光特殊文字效果

时间:2012-08-29 21:26:15

标签: javascript jquery jquery-ui animation css-transitions

我想制作黑色错误信息文字“发光”,红色轮廓在一秒后消失,但是,如果更新,则返回“完全发光”并再次开始消失,即使它没有首先完全消失了。是否有一个相当简单的jQuery / CSS方法来做到这一点?我认为两种同步衰落技术会相互竞争,异步和全部,我不知道如何产生发光效果,或者甚至可能使用标准样式。

6 个答案:

答案 0 :(得分:5)

您不需要使用任何外部插件,只需使用 jQuery 1.8 css3 即可,但这并不容易。您需要将css3 text-shadow属性与animate()

结合使用

更新:错误已修复。

Here is working jsFiddle text glow effect.

<强> jQuery的:

var red = $(".red");
red.click(function() {
   if ( !$(this).is(':animated') )

    //you just adjust here
    red.glowEffect(0,40,500);
    //which is:
    //red.glowEffect( start value , destination value , duration );
});

$.fn.glowEffect = function(start, end, duration) {
    var $this = this;
    return this.css("a", start).animate({
        a: end
    }, {
        duration: duration,
        step: function(now) {
            $this.css("text-shadow","0px 0px "+now+"px #c61a1a");
        }
    });
};​

<强>的CSS:

.red { text-shadow: 0px 0px 0px #c61a1a; }

注意:无需像-webkit- -ms- -moz- -o-那样定义供应商前缀jQuery 1.8自动修复。

来源:上周我问了类似问题,并得到了很好的答案:

How to combine jQuery animate with css3 properties without using css transitions?

答案 1 :(得分:2)

纯粹的CSS3解决方案从here无耻地被盗:

a.glow, a.glow:hover, a.glow:focus {  
    text-decoration: none;  
    color: #aaf;  
    text-shadow: none;  
    -webkit-transition: 500ms linear 0s;  
    -moz-transition: 500ms linear 0s;  
    -o-transition: 500ms linear 0s;  
    transition: 500ms linear 0s;  
    outline: 0 none;  
} 
a.glow:hover, a.glow:focus  {  
    color: #fff;  
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;  
}  

答案 2 :(得分:2)

这是barlasapaydin的一个版本,它与负面动画一起使用:

$.fn.glowEffect = function(start, end, duration, callback) {
    // Fetch last animation position
    if (this.data("last-glow")) 
        start = this.data("last-glow");

    return this.animate({
        'placeholder': end // This can be anything, it's just a placeholder to allow the animation to run
    }, {
        duration:duration,
        step: function(now, fx) {
            // Calculate current position
            now = parseInt(start + (end - start)*(fx.pos));
            // Set current animation position
            $(fx.elem).css("text-shadow","0px 0px "+now+"px #c61a1a")
                // Save position (if animation is interrupted)
                .data("last-glow", now);
        },
        complete:callback
    });
};

$(".red").click(function() {
    $(this)
        .stop()
        .glowEffect(0,50,1000, // Fade in
                    function() 
                    { 
                        $(this).glowEffect(50,0,1000);  // Fade out
                    });
});

代码有点复杂,但效果很好。

http://jsfiddle.net/Jf4vB/38/

有关“步骤”对象的一些有用的第三方文档:

http://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/

答案 3 :(得分:0)

使用jQuery UI的动画插件,您可以在文本后面创建模糊的红色阴影(使用CSS3属性),然后为其不透明度,大小等设置动画。

答案 4 :(得分:0)

我将CSS3“text-shadow”属性用于发光效果,并使用$(“。textid”)。stop()。addClass(“glow”,1000);对于动画。

编辑:好的,这不起作用:http://jsfiddle.net/2pBxP/:)

答案 5 :(得分:0)

要在JQuery中制作循环动画,您可以执行以下操作:

JQuery fade with loop and delay

然后,您可以使用CSS3添加文本发光(或阴影),但请注意,某些浏览器不支持此功能。