jQuery избледняващ блясък специален текстов ефект

Не е необходимо да използвате външни добавки, можете да направите това само с jQuery 1.8 и css3, но не е лесно. Трябва да комбинирате свойството css3 text-shadow с 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- jQuery 1.8 коригира това автоматично.

Източник: Зададох подобен въпрос миналата седмица и дойдоха страхотни отговори:

Как да комбинирате jQuery animate със свойства на css3 без използване на css преходи?

Чисто CSS3 решение, откраднато безсрамно от тук:

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

Ето версия на отговора на barlasapaydin, който работи с отрицателни анимации:

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

Кодът е малко объркан, но работи перфектно.

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

Някаква полезна документация на трети страни за обекта "step":

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

С помощта на плъгина за анимация на jQuery UI можете да създадете размита червена сянка зад вашия текст (използвайки свойства на CSS3) и след това да анимирате неговата непрозрачност, размер и т.н.

За да направите циклична анимация в JQuery, можете да направите нещо подобно:

Избледняване на JQuery с цикъл и забавяне

След това можете да използвате CSS3, за да добавите блясък на текст (или сянка), но имайте предвид, че това не се поддържа в някои браузъри.

Бих използвал свойството CSS3 "text-shadow" за светещия ефект и $(".textid").stop().addClass("glow", 1000); за анимацията.

РЕДАКТИРАНЕ: Добре, това не проработи: http://jsfiddle.net/2pBxP/ :)