Question

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.

Answer 1

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()

UPDATE: Bugs fixed.

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; }

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:

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