jQuery 动画“文本阴影”css 属性

Posted 2023-05-08

【中文标题】jQuery 动画“文本阴影”css 属性

【英文标题】：jQuery animate "text-shadow" css property

【发布时间】：2012-01-24 14:49:54

【问题描述】：

因此，当我使用 jQuery 的 .animate() 方法时，我了解到要为左边距设置动画，您必须使用以下内容：

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

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

如何使用animate() 中的text-shadow 属性？

【问题讨论】：

看这里：***.com/questions/2226906/…

【参考方案1】：

CSS 过渡是最好的方法，因为每个常用的支持 text-shadow 的浏览器也支持过渡。

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

基本示例：http://jsfiddle.net/adZ42/1/

更多关于将其改造成 jQuery 的信息：http://css3.bradshawenterprises.com/legacy/

【讨论】：

你知道的不多，但这基本上就是我正在寻找的确切效果：P。幻灯片和模糊;)

是否也可以将其用于“不透明度”？

您几乎可以将它用于所有属性：w3.org/TR/css3-transitions/#animatable-properties-

【参考方案2】：

在环顾了一段时间后，我意识到几乎所有的解决方案都适用于旧版本的 JQuery，我放弃了并编写了这些函数，这些函数主要用于 500 毫秒的淡入或淡出：

    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 版本并且它是稳定的。