jQuery渐变光晕特殊文本效果

Question

我想让黑色错误消息文本"发光"，红色轮廓在一秒钟后消失，但如果更新，则返回"完全发光"并再次开始消失，即使它最初没有完全消失。有没有一种相当简单的jQuery/CSS方法可以做到这一点？我认为两种同时褪色的技术会相互竞争，异步等等，我不太知道如何产生发光效果，也不知道是否可以使用标准样式。

Answer 1

您不需要使用任何外部插件，只需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这样的供应商前缀即可自动修复。

来源：上周我问了同样的问题，得到了很好的答案：

如何在不使用css转换的情况下将jQuery animate与css3属性相结合？

Answer 2

从这里无耻地偷走的纯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;  
}  

Answer 3

这是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/

关于"步骤"对象的一些有用的第三方文档：

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

Answer 4

使用jQuery UI的动画插件，您可以在文本后面创建一个模糊的红色阴影（使用CSS3属性），然后对其不透明度、大小等进行动画处理。

Answer 5

要在JQuery中制作循环动画，可以执行以下操作：

JQuery具有环路和延迟的衰落

然后可以使用CSS3添加文本光晕（或阴影），但请注意，某些浏览器不支持这样做。

Answer 6

我会使用CSS3"text shadow"属性来获得发光效果，并使用$（".textid"）.stop（）.addClass（"glow"，1000）；用于动画。

编辑：好吧，那没用：http://jsfiddle.net/2pBxP/：）