javascript - jQuery 褪色发光特殊文字效果

Question

我想让黑色错误消息文本“发光”，红色轮廓在一秒钟后消失，但是，如果更新，返回到“全发光”并再次开始消失，即使它没有首先完全消失。有没有一种相当简单的 jQuery/CSS 方法可以做到这一点？我认为两种同步褪色技术会相互竞争，它们是异步的，而且我不太清楚如何产生发光效果，或者是否有可能使用标准样式。

Answer 1

您不需要使用任何外部插件，只需使用 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- 那样定义 vendor 前缀，jQuery 1.8 会自动修复该问题。

资料来源:我上周问过类似的问题，得到了很好的答案:

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