Question

因此，当我使用jQuery的.animate()方法时，我已经了解到为了给左边距设置动画，你必须使用这样的东西：

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

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

不同

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

Answer 1

CSS转换是最佳方式，因为支持文本阴影的常用用户也支持转换。

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

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

有关将其改装为jQuery的更多信息：http://css3.bradshawenterprises.com/legacy/

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

jQuery动画“text-shadow”css属性

2 个答案: