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

下面的代码试图为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中使用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 - jQuery-如何为box-shadow属性设置动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27340404/