正确的方式来使用jQueryanimation盒子阴影

使用jQuery为box-shadow属性设置animation的正确语法是什么？

$().animate({?:"0 0 5px #666"}); 

Answer 1

直接回答

使用Edwin Martin的用于影子animation的jQuery插件来扩展.animate方法，您可以简单地使用“boxShadow”的常规语法和颜色 ， x和y偏移量 ， blur-radius和spread-半径 – 获取animation。 它包括多个影子支持。

 $(element).animate({ boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)" }); 

---

改为使用CSSanimation

jQuery通过改变DOM元素的style属性来进行animation处理，这可能会导致特殊的意外，并将样式信息移出样式表。

我找不到CSS shadowanimation的浏览器支持统计信息，但是您可能会考虑使用jQuery来应用基于animation的类，而不是直接处理animation。 例如，您可以在样式表中定义一个箱形阴影animation：

 @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; } 

然后，您可以使用本地cssanimationend属性将animation的结尾与您在JS代码中所做的操作同步：

 $(element).addClass('shadow-pulse'); $(element).on('cssanimationend', function(){ $(element).removeClass('shadow-pulse'); // do something else... }); 

Answer 2

如果您使用的是jQuery 1.4.3+，那么您可以利用添加的cssHooks代码。

通过使用boxShadow钩子： https ： //github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

你可以做这样的事情：

 $('#box').animate({ 'boxShadowX': '10px', 'boxShadowY':'10px', 'boxShadowBlur': '20px' }); 

挂钩不让你animation的颜色，但我相信有一些可以添加的工作。

例如： http : //jsfiddle.net/petersendidit/w5aAn/

Answer 3

如果你不想使用插件，可以使用一些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.*/ 

检查出来： http : //jsfiddle.net/Z8E5U/

如果你想要完整的CSSanimation文档，你的魔法之路从这里开始。

Answer 4

我喜欢ShaneSauce解决scheme！ 使用一个ID的类intead，你可以使用jQuery addClass / delay / removeClass将效果添加/删除任何元素：

 $('.error').each( function(idx, el){ $( el ) .addClass( 'highlight' ) .delay( 2000 ) .removeClass( 'highlight' ); }); 

Answer 5

下面是一个没有插件的例子： jQueryanimation框但是它没有使用插件的额外function，但是我个人喜欢看（并且理解）疯狂背后的方法。