Question

我不知道webkit浏览器中动画阴影的语法。

$("#id").animate({-webkit-box-shadow: '0 0 1rem white'}, 1000);

OD

$("#id").animate({boxShadow: '0 0 1rem white'}, 1000);

或

$("#id").animate({'-webkit-box-shadow': '0 0 1rem white'}, 1000);

但没有任何反应。

Answer 1

您可以直接在现代网络工具包浏览器中动画（转换）box-shadow。无需任何浏览器扩展程序：

#myBox {
    box-shadow: 5px 5px 3px 0 #CCCCCC;
    transition: box-shadow 1s;
}

这是一个小提琴：

http://jsfiddle.net/7SRUE/

Answer 2

积分Correct way to animate box-shadow with jQuery

解决方案＃1 - JQuery：

您可以查看Edwin Martin的 jQuery plugin for shadow animation 。它扩展了.animate方法，因此你可以简单地使用普通语法和“boxShadow”以及颜色，x和y偏移，模糊半径和扩散半径的每个方面：

$(selector).animate({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });

解决方案＃2 - CSS：

#my-div{    
    position:absolute;
    top: 50px;
    left: 50px;
    height: 100px;
    width:  100px;
    background-color: #eee;
    animation: shadowThrob 5s;
    animation-direction: alternate;
    -webkit-animation: shadowThrob 5s;
    -webkit-animation-direction: alternate;
}
/* Standard syntax */
@keyframes shadowThrob {
    from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
    to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes shadowThrob {
    from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
    to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}

修改

改变了这个：

/* Standard syntax */ animation: shadowThrob 5s; /* Chrome, Safari, Opera */ -webkit-animation: shadowThrob 5s;

要在5秒后停止...还在代码中添加了一些浏览器兼容性评论

JSFiddle :(已更新）

link

我怎么做用jquery动画元素的阴影？

2 个答案: