[英]jQuery fading glow special text effect
I'd like to make black error message text "glow" with a red outline that fades away after a second, but, if updated, return to "full glow" and start fading away again, even if it hadn't faded away completely in the first place. 我想用黑色轮廓使黑色错误消息文本“发光”带有红色的轮廓,该轮廓会在第二秒后消失,但是,如果更新,则返回“全发光”并再次消失,即使它没有完全消失。首先。 Is there a fairly easy jQuery/ CSS way to do this? 有没有一个相当简单的jQuery / CSS方式来做到这一点? I think two simultaneous fading techniques would compete with each other, being asynchronous and all, and I don't quite know how to generate the glowing effect, or if it's even possible using standard styling. 我认为两种同时衰落的技术会相互竞争,无论是异步还是全部,而且我不太了解如何产生发光效果,或者甚至不知道是否可以使用标准样式。
You don't need to use any external plugins, you can do this with just jQuery 1.8 and css3 but it isn't easy. 您不需要使用任何外部插件,只需使用jQuery 1.8和css3即可完成此操作,但这并不容易。 You need to combine css3 text-shadow
property with animate()
您需要将css3 text-shadow
属性与animate()
UPDATE: Bugs fixed. 更新:错误已修复。
Here is working jsFiddle text glow effect. 这是工作的jsFiddle文本发光效果。
jQuery: 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: CSS:
.red { text-shadow: 0px 0px 0px #c61a1a; }
Note: No need to define vendor prefixes like -webkit- -ms- -moz- -o-
jQuery 1.8 fixes that automaticly. 注意:无需定义供应商前缀,例如-webkit- -ms- -moz- -o-
jQuery 1.8会自动修复。
Source: I've asked alike question last week, and great answers came: 资料来源:上周我曾问过一个类似的问题,很好的答案来了:
How to combine jQuery animate with css3 properties without using css transitions? 如何在不使用CSS过渡的情况下将jQuery动画与CSS3属性结合在一起?
A pure CSS3 solution stolen shamelessly from 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;
}
Here's a version of barlasapaydin's answer that works with negative animations: 这是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
});
});
The code's a bit convoluted but it works perfectly. 代码有点复杂,但是效果很好。
http://jsfiddle.net/Jf4vB/38/ http://jsfiddle.net/Jf4vB/38/
Some helpful third-party documentation on the "step" object: 关于“ step”对象的一些有用的第三方文档:
http://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/ http://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/
使用jQuery UI的动画插件,您可以在文本后面创建模糊的红色阴影(使用CSS3属性),然后为其不透明度,大小等设置动画。
I'd use the CSS3 "text-shadow" property for the glowing effect, and $(".textid").stop().addClass("glow", 1000); 我会使用CSS3的“文本阴影”属性来产生发光效果,并使用$(“。textid”)。stop()。addClass(“ glow”,1000); for the animation. 用于动画。
EDIT: Okay, that did not work: http://jsfiddle.net/2pBxP/ :) 编辑:好的,那行不通: http : //jsfiddle.net/2pBxP/ :)
To make a looping animation in JQuery you can do something like this: 要在JQuery中制作循环动画,您可以执行以下操作:
JQuery fade with loop and delay jQuery淡入淡出循环和延迟
You can then use CSS3 to add a text glow (or shadow), but note that this is not supported in some browsers. 然后,您可以使用CSS3添加文本发光(或阴影),但是请注意,某些浏览器不支持此功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.