解决方法
如果您只想使用CSS3，甚至不需要使用任何jQuery / Javascript。只需在您的CSS中执行此操作：
- .confirm_selection {
- -webkit-transition: text-shadow 0.2s linear;
- -moz-transition: text-shadow 0.2s linear;
- -ms-transition: text-shadow 0.2s linear;
- -o-transition: text-shadow 0.2s linear;
- transition: text-shadow 0.2s linear;
- }
- .confirm_selection:hover {
- text-shadow: 0 0 10px red; /* replace with whatever color you want */
- }
这是小提琴：http://jsfiddle.net/zenjJ/
编辑：
如果你想让元素自己运行(没有悬停)，请执行以下操作：
CSS：
- .confirm_selection {
- -webkit-transition: text-shadow 1s linear;
- -moz-transition: text-shadow 1s linear;
- -ms-transition: text-shadow 1s linear;
- -o-transition: text-shadow 1s linear;
- transition: text-shadow 1s linear;
- }
- .confirm_selection:hover,.confirm_selection.glow {
- text-shadow: 0 0 10px red;
- }
使用Javascript：
- var glow = $('.confirm_selection');
- setInterval(function(){
- glow.toggleClass('glow');
- },1000);
您可以在CSS / Javascript中使用时间来获得正确的效果。
最后，这是小提琴：http://jsfiddle.net/dH6LS/
更新2013年10月：所有主流浏览器现在都支持CSS动画，您需要的就是：
- .confirm_selection {
- animation: glow .5s infinite alternate;
- }
- @keyframes glow {
- to {
- text-shadow: 0 0 10px red;
- }
- }
这是小提琴：http://jsfiddle.net/dH6LS/689/
不要忘记在生产中包含所有不同的供应商前缀。
