使用 jQuery 为 box-shadow 设置动画的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4133366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Correct way to animate box-shadow with jQuery
提问by chchrist
Which is the correct syntax to animate the box-shadowproperty with jQuery?
哪个是使用 jQuery为box-shadow属性设置动画的正确语法？
$().animate({?:"0 0 5px #666"});
采纳答案by iono
Direct answer
直接回答
Using Edwin Martin's jQuery plugin for shadow animation, which extends the .animatemethod, you can simply use the normal syntax with "boxShadow" and every facet of that - color, the x- and y-offset, the blur-radiusand spread-radius- gets animated. It includes multiple shadow support.
使用 Edwin Martin 的jQuery 插件进行阴影动画，它扩展了该.animate方法，您可以简单地使用带有“boxShadow”的普通语法以及该方法的每个方面 -颜色、x 和 y 偏移量、模糊半径和传播半径-得到动画。它包括多个影子支持。
$(element).animate({
boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
});
Using CSS animations instead
改用 CSS 动画
jQuery animates by changing the styleproperty of DOM elements, which can cause surprises with specificity and moves style information out of your stylesheets.
jQuery 通过更改styleDOM 元素的属性来实现动画效果，这可能会导致意外的特殊性并将样式信息移出样式表。
I can't find browser support stats for CSS shadow animation, but you might consider using jQuery to apply an animation-based classinstead of handling the animation directly. For example, you can define a box-shadow animation in your stylesheet:
我找不到 CSS 阴影动画的浏览器支持统计信息，但您可以考虑使用 jQuery 来应用基于动画的类，而不是直接处理动画。例如，您可以在样式表中定义一个 box-shadow 动画：
@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;
}
You can then use the native animationendevent to synchronise the end of the animation with what you were doing in your JS code:
然后，您可以使用本机animationend事件将动画的结束与您在 JS 代码中所做的事情同步：
$(element).addClass('shadow-pulse');
$(element).on('animationend', function(){
$(element).removeClass('shadow-pulse');
// do something else...
});
回答by PetersenDidIt
If you are using jQuery 1.4.3+ then you can take advantage of the cssHooks code that was added.
如果您使用的是 jQuery 1.4.3+，那么您可以利用添加的 cssHooks 代码。
By using the boxShadow hook: https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js
通过使用 boxShadow 钩子：https: //github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js
You can do something like this:
你可以这样做：
$('#box').animate({
'boxShadowX': '10px',
'boxShadowY':'10px',
'boxShadowBlur': '20px'
});
The hook doesn't let you animate the color yet but I am sure with some work that could be added.
钩子还不能让您为颜色设置动画，但我确信可以添加一些工作。
回答by ShaneSauce
If you don't want to use a plugin, it can be done with a bit of CSS:
如果您不想使用插件，可以使用一些 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.*/
Check it out: http://jsfiddle.net/Z8E5U/
检查一下：http: //jsfiddle.net/Z8E5U/
If you want full documentation on CSS animations, your path to wizardry begins here..
如果您想要有关 CSS 动画的完整文档，您的魔法之路从这里开始。
回答by laurent belloeil
I love the ShaneSauce solution ! Use a class intead of an ID and you can add/remove the effect to any element using jQuery addClass/delay/removeClass :
我喜欢 ShaneSauce 解决方案！使用类而不是 ID，您可以使用 jQuery addClass/delay/removeClass 向任何元素添加/删除效果：
$('.error').each( function(idx, el){
$( el )
.addClass( 'highlight' )
.delay( 2000 )
.removeClass( 'highlight' );
});
回答by Drazion
Here is an example of how to do it without a plugin: jQuery animated BoxBut it doesn't have the extra functionality that comes with the use of a plugin, but I personally like to see (and understand) the method behind the madness.
下面是一个不用插件就可以做到的例子：jQuery 动画 Box但它没有使用插件带来的额外功能，但我个人喜欢看到（和理解）疯狂背后的方法。
