jQuery fading glow special text effect

问题:

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.

回答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?

回答2:

A pure CSS3 solution stolen shamelessly from 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;  
}  

回答3:

Here's a version of barlasapaydin's answer that works with negative animations:

$.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
                    });
});

The code's a bit convoluted but it works perfectly.

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

Some helpful third-party documentation on the "step" object:

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

回答4:

Using jQuery UI's animation plugin you can create a fuzzy red shadow behind your text (using CSS3 properties) and then animate its opacity, size, etc.

回答5:

To make a looping animation in JQuery you can do something like this:

JQuery fade with loop and delay

You can then use CSS3 to add a text glow (or shadow), but note that this is not supported in some browsers.

回答6:

I'd use the CSS3 "text-shadow" property for the glowing effect, and $(".textid").stop().addClass("glow", 1000); for the animation.

EDIT: Okay, that did not work: http://jsfiddle.net/2pBxP/ :)