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

Answer 2

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

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

});

}）;

参见此演示

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

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

2 个答案: