jQuery褪色发光特殊文字效果

Question

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

Answer 1

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

更新:错误修复.

这是工作jsFiddle文本发光效果.

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修复程序等供应商前缀.

资料来源:上周我问过同样的问题,并得到了很好的答案:

如何在不使用css转换的情况下将jQuery动画与css3属性结合起来？