jQuery的动画“文字阴影” CSS属性

因此，正如我已经与jQuery的.animate()方法工作，我已经学会了以动画左旁你将不得不使用这样的事情：jQuery的动画“文字阴影” CSS属性

$('#thing').animate({marginLeft: 20}, 1000);

这与使用css属性不同margin-left: 20px;

我怎么能使用animate()里面的text-shadow属性？

来源

2011-12-20 sirmdawg

看这里：http://stackoverflow.com/questions/2226906/animating-elements-of-text-shadow-with-jquery – 2011-12-20 16:47:18

CSS转换是最好的方式，因为每个支持文本阴影的常用浏览器也支持转换。

在这种情况下，您只需设置转换属性，然后使用JS或通过更改类来更改样式。

基本例如：在改进此为jQuery的http://jsfiddle.net/adZ42/1/

来源

2011-12-20 19:44:12

你知道吗，但基本上我正在寻找的确切效果：P 。幻灯片和模糊;） – sirmdawg 2011-12-20 19:55:50

是否有可能使用这个“不透明”以及？ – sirmdawg 2011-12-20 20:01:33

几乎可以将它用于每个属性：http://www.w3.org/TR/css3-transitions/#animatable-properties- – 2011-12-20 20:27:17

东张西望了一会儿，并在那里是老版本的jQuery认识到，几乎所有的解决方案，我放弃了，写这些函数主要做的伎俩为500ms的淡入或淡出：

function AddShadow(ControlID) 
    { 
     for (i = 0; i < 11; i++) 
     { 
      setTimeout('$("#' + ControlID + '").css("text-shadow", "0 0 ' + i + 'px White");', i * 50); 
     } 
    } 

    function RemoveShadow(ControlID) 
    { 
     for (i = 0; i < 11; i++) 
     { 
      setTimeout('$("#' + ControlID + '").css("text-shadow", "0 0 ' + (10 - i) + 'px White");', i * 50); 
     } 
    }

然后你只需像这样一个jQuery的悬停处理程序实现：

$('.class').hover(function() {AddShadow($(this).attr('id'))}, function() {RemoveShadow($(this).attr('id'))};

我不喜欢他们的唯一的事情是，如果你将鼠标悬停在对象很快就会出现闪烁现象，因为它的两个功能之间交替，但至少它总是让他们的是一个最终状态未褪。

其他原因，它的效果并不理想：

这不是很直观，因为你必须用循环和乘数都乱来改变时间或水平
它不仅线性步骤
这可能不是一个非常有效的方式。
任何想要使用这些功能的控件都必须有一个ID或它不起作用。

但是好的一面，它应该适用于每个JQuery版本，并且它很稳定。

来源

2018-02-28 22:50:45 Jrud

jQuery的动画“文字阴影” CSS属性

回答

相关问题