jQuery褪色发光特殊文字效果
我想制作黑色错误信息文字“发光”，红色轮廓在一秒后消失，但是，如果更新，返回“完全发光”并再次开始消失，即使它没有完全消失首先。 是否有一个相当简单的jQuery / CSS方法来做到这一点？ 我认为两种同步衰落技术会相互竞争，异步和全部，我不知道如何产生发光效果，或者甚至可能使用标准样式。
你不需要使用任何外部插件，只需使用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动画与css3属性结合起来？
一个纯粹的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://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/
使用jQuery UI的动画插件，您可以在文本后面创建模糊的红色阴影（使用CSS3属性），然后为其不透明度，大小等设置动画。
要在JQuery中制作循环动画，您可以执行以下操作：
JQuery随着循环和延迟而淡出
然后，您可以使用CSS3添加文本发光（或阴影），但请注意，某些浏览器不支持此function。
我将CSS3“text-shadow”属性用于发光效果，并使用$（“。textid”）。stop（）。addClass（“glow”，1000）; 为了动画。
编辑：好的，这不起作用： http ： //jsfiddle.net/2pBxP/ 🙂