1

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

4

6 回答 6

5

您不需要使用任何外部插件，只需使用jQuery 1.8和css3就可以做到这一点，但这并不容易。您需要将 css3text-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 属性结合起来？

于 2012-08-29T21:32:13.177 回答
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;  
}
于 2012-08-29T21:34:23.670 回答
2

这是适用于负面动画的 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/

于 2012-08-30T11:32:13.170 回答
0

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

于 2012-08-29T21:28:33.337 回答
0

我会使用 CSS3 “text-shadow” 属性来实现发光效果，并使用 $(".textid").stop().addClass("glow", 1000); 为动画。

编辑：好的，那不起作用：http: //jsfiddle.net/2pBxP/ :)

于 2012-08-29T21:30:37.297 回答
0

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

带有循环和延迟的JQuery淡入淡出

然后，您可以使用 CSS3 添加文本发光（或阴影），但请注意，某些浏览器不支持此功能。

于 2012-08-29T21:31:29.517 回答