我如何使用 jquery 为元素的阴影设置动画？ [复制]答案

【问题标题】：How i can do to animate shadow of the element with jquery? [duplicate]我如何使用 jquery 为元素的阴影设置动画？ [复制]
【发布时间】：2014-08-13 00:53:33
【问题描述】：

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

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

好

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

或

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

但什么也没发生。

【问题讨论】：

是否需要 jQuery 动画？如果没有，则使用 Css 动画。因为css性能非常好
@MaulikAnand，我有一个小型浏览器游戏，我需要在开始游戏（训练）之前为用户挑选一些元素（控制元素）。不知道用哪种方式比较好？
@NikhilTalreja，我测试了这个解决方案，但也没有任何反应......
我推荐 Velocity js 。它的性能比 CSS 好，尤其是在高压力情况下，如果您正在开发游戏，那么性能是关键
这个链接应该有帮助：stackoverflow.com/questions/4133366/…

标签： javascript jquery html css jquery-ui

【解决方案1】：

您可以直接在现代网络工具包浏览器中简单地为box-shadow 设置动画（过渡）。无需任何浏览器扩展：

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

这是一个小提琴：

http://jsfiddle.net/7SRUE/

【讨论】：

【解决方案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 秒后停止...还在代码中添加了一些用于浏览器兼容性的 cmets

JSFiddle：（更新）

link

【讨论】：

如何添加事件处理程序以启动和停止此动画？
对不起，动画还在无限运行中
再次编辑了答案。抱歉，我错过了 -webkit 部分...查看新的演示
@user3739658 -1！ 强烈避免只是复制别人的答案。即使您这样做是为了参考，也要对原作者给予适当的信任！我可以看到这里已经回答了：stackoverflow.com/questions/4133366/…