我想让黑色错误消息文本“发光”，红色轮廓在一秒钟后消失，但是，如果更新，返回“全发光”并再次开始消失，即使它没有一开始就彻底消失了。有没有相当简单的 jQuery/CSS 方法来做到这一点？我认为两种同时的淡入淡出技术会相互竞争，它们都是异步的，而且我不太清楚如何生成发光效果，或者是否可以使用标准样式。
【问题讨论】：
标签： javascript jquery jquery-ui animation css-transitions
这是 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
});
});
代码有点复杂，但运行良好。
关于“step”对象的一些有用的第三方文档：
http://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/
【讨论】：
您不需要使用任何外部插件，只需 jQuery 1.8 和 css3 就可以做到这一点，但这并不容易。您需要将 css3 text-shadow 属性与 animate() 结合起来
更新：已修复错误。
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; }
注意：不需要像-webkit- -ms- -moz- -o-这样定义供应商前缀，jQuery 1.8 会自动修复。
来源：上周我问了类似的问题，得到了很好的答案：
How to combine jQuery animate with css3 properties without using css transitions?
【讨论】：
red.glowEffect函数。我在更新中解释并指出了这一点。
我会使用 CSS3 “text-shadow” 属性来实现发光效果，并使用 $(".textid").stop().addClass("glow", 1000);用于动画。
编辑：好的，那不起作用：http://jsfiddle.net/2pBxP/ :)
【讨论】：
从here无耻盗取的纯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;
}
【讨论】：
a.glow 和a.glow:hover, a.glow:focus 的样式分开，则可以分别调整开和关转换的时间。 jsfiddle.net/mblase75/GzTC7
要在 JQuery 中制作循环动画，您可以执行以下操作：
JQuery fade with loop and delay
然后您可以使用 CSS3 添加文本发光（或阴影），但请注意，某些浏览器不支持此功能。
【讨论】：
使用 jQuery UI 的动画插件，您可以在文本后面创建一个模糊的红色阴影（使用 CSS3 属性），然后对其不透明度、大小等进行动画处理。
【讨论】：