jQuery - 如何为 box-shadow 属性设置动画？答案

【问题标题】：jQuery - How to animate the box-shadow property?jQuery - 如何为 box-shadow 属性设置动画？
【发布时间】：2014-12-07 06:48:59
【问题描述】：

以下代码正在尝试为 box-shadow css 属性设置动画。

$("button").click(function() {
  $(this).animate(function() {
    box-shadow: "10px 10px 0 0 green", //does not work
    boxShadow: "10px 10px 0 0 green", //does not work
    boxshadowX: "200px" //does not work
  });
});

上面的代码不起作用。是否可以在 animate 函数中为 box-shadow 属性设置动画？如果不可能，还有其他替代方案可以做同样的事情吗？

【问题讨论】：

标签： jquery css jquery-animate

【解决方案1】：

首先你的语法是错误的。

其次，只能在 jQuery 中使用 animate() 对数值进行动画处理。一个替代方案可以是

$("button").click(function() {
    $(this).css({
        box-shadow: "10px 10px 0 0 green", 
        boxShadow: "10px 10px 0 0 green", 
        boxshadowX: "200px"
    });
});

然后在你的 CSS 中

button
{
    transition: all .8s;   /* add vendor prefixes*/
}

【讨论】：

感谢您的回复！请确认 jquery animate 是否只接受数值
@ Anubhav - prop-val 可以采用“高度：”切换“”。并且切换是一个字符串，而不是一个数值。所以可能只说数值是不对的，认为内部切换可能会将自己强制为一个数字。对吗？
当您使用animate() 时，您只能使用数字将元素转换为这些数字，例如left: 20px 将使元素从其当前位置向左移动20px。现在toggle 是jQuery 中的内置关键字。如果你使用height: 'toggle'，它肯定会工作，因为 jQuery 已经识别了它。没有其他字符串可以这样使用。

【解决方案2】：

这个小提琴可能会对你有所帮助。这与我前几天的问题有些相关。

$(document).ready(function() {
$("button").click(function(){   
   $(this).toggleClass("click");

});

});

看这个演示

http://jsfiddle.net/TUFPU/6/

【讨论】：