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

Question

下面的代码试图为 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 属性设置动画？如果不可能，还有什么其他替代方案可以做到这一点？

Answer 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*/
}