【发布时间】：2011-05-07 05:02:54
【问题描述】：
使用 jQuery 为 box-shadow 属性设置动画的正确语法是什么？
$().animate({?:"0 0 5px #666"});
【问题讨论】：
标签： jquery css jquery-animate box-shadow
【发布时间】：2011-05-07 05:02:54
【问题描述】：
直接回答
使用 Edwin Martin 的 jQuery plugin for shadow animation，它扩展了 .animate 方法，您可以简单地使用带有“boxShadow”的常规语法以及它的各个方面 - color ，x 和 y 偏移，blur-radius 和 spread-radius - 被动画化。它包括多个阴影支持。
$(element).animate({
boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
});
改用 CSS 动画
jQuery 通过更改 DOM 元素的 style 属性来制作动画，这可能会导致意外的特殊性并将样式信息移出样式表。
我找不到 CSS 阴影动画的浏览器支持统计信息，但您可以考虑使用 jQuery 来应用基于动画的 class，而不是直接处理动画。例如，您可以在样式表中定义一个盒子阴影动画：
@keyframes shadowPulse {
0% {
box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
}
100% {
box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
}
}
.shadow-pulse {
animation-name: shadowPulse;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
然后您可以使用本机 animationend 事件将动画的结束与您在 JS 代码中所做的同步：
$(element).addClass('shadow-pulse');
$(element).on('animationend', function(){
$(element).removeClass('shadow-pulse');
// do something else...
});
【讨论】：
-
我同意，接受的答案最近没有更新。这个插件很适合我。
-
我似乎无法使用 jQuery 1.9 让它正常工作，还有其他人遇到过这个吗？
-
鉴于它才出来，什么，一周前（？），他可能还没有更新它。通读jQ1.9 upgrade guide 和shadow animation plugin's source，看看哪些方法需要返工，如果紧急的话。
-
我使用了您链接的存档，而不是他的插件的最新版本，它运行完美。这样就解决了我的问题，感谢您的快速回复。
-
我昨天尝试了未缩小版和缩小版，都给了我同样的错误。我很高兴它现在可以工作了，我只是希望我不会遇到任何在 1.8 中解决的问题。我也希望 Edwin 将继续开发这个插件，因为它似乎是最容易使用的版本。
如果您使用的是 jQuery 1.4.3+，那么您可以利用添加的 cssHooks 代码。
通过使用 boxShadow 钩子：https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js
你可以这样做：
$('#box').animate({
'boxShadowX': '10px',
'boxShadowY':'10px',
'boxShadowBlur': '20px'
});
钩子还不能让你为颜色设置动画，但我确信还有一些可以添加的工作。
【讨论】：
-
cssHooks 是 1.4.3 的一部分还是插件？如果你有 jQuery 文档的链接，我很乐意提供，这听起来很有趣。
-
@Surreal 1.4.3 的一部分。 cssHooks 的文档还没有太多，但你可以深入了解它并检查一下：github.com/jquery/jquery/blob/master/src/css.js Brandon Arron 一直在使用 cssHooks：github.com/brandonaaron/jquery-cssHooks
-
@Blowsie 可能是 boxshadow cssHook 的问题。可能和这个问题一样：github.com/brandonaaron/jquery-cssHooks/issues/32
-
这似乎不支持插入框阴影，还是我弄错了？
-
@AdamFraser 为我工作（在 Chrome 中测试）jsfiddle.net/petersendidit/w5aAn/474
如果你不想使用插件，可以用一点 CSS 来完成：
#my-div{
background-color: gray;
animation: shadowThrob 0.9s infinite;
animation-direction: alternate;
-webkit-animation: shadowThrob 0.9s ease-out infinite;
-webkit-animation-direction: alternate;
}
@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);}
}
@-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);}
}
/*NOTE: The animation property is not supported in Internet Explorer 9 and earlier versions.*/
如果您想要关于 CSS 动画的完整文档，您的魔法之路begins here..
【讨论】：
-
确实不错。不知何故，这个并没有烧毁我运行动画的大部分处理器。我认为，但我不确定，这是因为我为关键帧使用了 2 个 百分比 范围（0%、50% 和 100%）。
我喜欢 ShaneSauce 解决方案！ 使用类而不是 ID，您可以使用 jQuery addClass/delay/removeClass 向任何元素添加/删除效果：
$('.error').each( function(idx, el){
$( el )
.addClass( 'highlight' )
.delay( 2000 )
.removeClass( 'highlight' );
});
【讨论】：
这里有一个不用插件怎么做的例子：jQuery animated Box 但是它没有使用插件带来的额外功能，但我个人喜欢看（并理解）背后的方法疯狂。
【讨论】：