jQuery fading glow special text effect

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.

Googling for "css animated glow" brought me [here](http://www.sitepoint.com/css3-glowing-link-effect/#fbid=bsgdXahsa5j). — Blazemonger, Aug 29 '12 at 21:31

score 5 · Accepted Answer · edited May 23 '17 at 11:52

5

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?

edited May 23 '17 at 11:52

Community

1
1

answered Aug 29 '12 at 21:32

Barlas Apaydin

7,233
11
55
86

Can this be interrupted and reset by itself? – Jeremy Holovacs Aug 29 '12 at 22:00
@JeremyHolovacs Yes. You can do whatever animation you need mate, just adjust `red.glowEffect` function inside click. I explained and pointed that out in my update. – Barlas Apaydin Aug 29 '12 at 22:06
Hmm... that's not really what I was looking for. It looks like this will ignore a subsequent animation if it is fading... I want it to reset to its "fresh, brightly glowing" state if the event occurs before the last animation finishes. – Jeremy Holovacs Aug 29 '12 at 23:30
there is no example on your question so i did it this way, if you really understand this way, you realise that you can do anything with this – Barlas Apaydin Aug 30 '12 at 09:59
I've noticed this function does not work with a negative animation, f.e red.glowEffect(100,0,500); Which is part of what the op wants. – Jan Aug 30 '12 at 10:58
@Jan yes, which i try to underline it on my update. I will update my answer again. – Barlas Apaydin Aug 30 '12 at 11:01
1

Did some testing and it's because the css property "a" doesn't exist, so it always starts from 0. – Jan Aug 30 '12 at 11:06
@Jan Thank you very much, you discovered a bug (: i'll work on it. But there will be no problem if animation starts from `0` value. – Barlas Apaydin Aug 30 '12 at 11:16
@JeremyHolovacs i've updated my answer and cleared bugs, i hope it would help. – Barlas Apaydin Aug 30 '12 at 11:25
Just to be clear, this solution always starts the animation from 0 so it won't be possible to make a fade-out effect with it, only fade-in. If that's OK with the op then fire away! :) – Jan Sep 01 '12 at 18:22
@Jan We fixed that problem mate: http://jsfiddle.net/qZRdZ/112/ and here is the question: [How to combine jQuery animate with css3 properties without using css transitions?](http://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties-without-using-css-transitions) **If you have better solution, post here.** – Barlas Apaydin Sep 01 '12 at 19:31

score 2 · Answer 2 · answered Aug 29 '12 at 21:34

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

answered Aug 29 '12 at 21:34

Blazemonger

90,923
26
142
180

interesting... I will try this out. – Jeremy Holovacs Aug 29 '12 at 22:02
This has a very nice effect, but only answers the first part of the question; how would I implement this glow and have it slowly fade away, unless the event that made it glow and started it fading was fired again, at which point it would "reset" to full "glow-on"? – Jeremy Holovacs Aug 29 '12 at 23:33
Have you tried tinkering with it? If you separate the styles for `a.glow` and `a.glow:hover, a.glow:focus`, then you can adjust the timing for the on and off transitions separately. http://jsfiddle.net/mblase75/GzTC7/ – Blazemonger Aug 30 '12 at 12:50

Jan · Answer 3 · 2012-09-01T18:30:43.303

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/

lol, nice try mate, we solve the problem on my answer which you find (: this works perfect: http://jsfiddle.net/qZRdZ/112/ — Barlas Apaydin, Aug 30 '12 at 18:22
you can inspect the steps of this plugin from this question: http://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties-without-using-css-transitions — Barlas Apaydin, Aug 30 '12 at 18:22

score 0 · Answer 4 · answered Aug 29 '12 at 21:28

0

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.

answered Aug 29 '12 at 21:28

Alnitak

334,560
70
407
495

To be sure, if you're going to use CSS3 properties, you may as well go all the way and animate it with CSS transitions as well. – Blazemonger Aug 29 '12 at 21:30

Jan · Answer 5 · 2012-08-29T21:43:51.247

0

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/ :)

edited Aug 29 '12 at 21:43

answered Aug 29 '12 at 21:30

Jan

5,688
3
27
44

score 0 · Answer 6 · edited May 23 '17 at 11:52

0

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.

edited May 23 '17 at 11:52

Community

1
1

answered Aug 29 '12 at 21:31

SaphuA

3,092
3
39
58

jQuery fading glow special text effect

6 Answers6

Linked