jQuery-如何设置长方体阴影属性的动画？

下面的代码正在尝试设置长方体阴影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函数中设置长方体阴影属性的动画？如果不可能，还有什么其他替代方案可以做到同样的事情呢？

首先，您的语法是错误的

其次，只有在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*/
}

---

这把小提琴可能对你有帮助。这多少与我前几天的问题有关

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

});

}))

看到这个演示了吗

---

谢谢您的回复！请确认jquery animate是否只接受数值@Anubhav-prop val可以接受“height:”toggle“。而toggle是一个字符串，而不是一个数值。所以，只说数值可能是不对的，因为“内部切换”可能会强迫自己使用一个数字。右？使用

animate（）

时，只能使用数字将元素转换为这些数字，例如

left:20px

将使元素从其当前位置向左动画20px。现在，

toggle

是jQuery中的一个内置关键字。如果您使用

height:'toggle'

，它肯定会工作，因为jQuery已经识别了它。不能使用其他字符串。