jQuery的衰落辉光特殊的文字效果 [英] jQuery fading glow special text effect

问题描述

我想使黑色错误消息文本光晕有一个红色的轮廓线，第二次后消失，但如果更新，恢复到全发光，并再次开始渐行渐远，即使它没有首先消失完全。是否有一个相当简单的jQuery / CSS方式做到这一点？ ，我认为两个同时衰落技术将彼此，是异步的，和所有竞争，我不太知道怎么产生发光效果，或者如果它使用标准的造型甚至有可能。

I'd like to make black error message text "glow" with a red outline that fades away after a second, but, if updated, return to "full glow" and start fading away again, even if it hadn't faded away completely in the first place. Is there a fairly easy jQuery/ CSS way to do this? I think two simultaneous fading techniques would compete with each other, being asynchronous and all, and I don't quite know how to generate the glowing effect, or if it's even possible using standard styling.

推荐答案

您不需要使用任何外部插件，你可以只用这样做的jQuery 1.8 和 CSS3 但它是不容易的。您需要CSS3 文本阴影财产结合动画（）

You don't need to use any external plugins, you can do this with just jQuery 1.8 and css3 but it isn't easy. You need to combine css3 text-shadow property with 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厂商prefixes - 的jQuery 1.8补丁该全自动。

Note: No need to define vendor prefixes like -webkit- -ms- -moz- -o- jQuery 1.8 fixes that automaticly.

来源：我上周问一样的问题，伟大的答案来了：

Source: I've asked alike question last week, and great answers came:

<一个href=\"http://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties-without-using-css-transitions\">How结合使用jQuery的CSS3属性动画，而无需使用CSS过渡？

这篇关于jQuery的衰落辉光特殊的文字效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！