使用jQuery设置长方体阴影动画的正确方法

使用jQuery设置框阴影属性动画的正确语法是什么

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

---

如果您使用的是jQuery1.4.3+，那么您可以利用添加的cssHooks代码

通过使用boxShadow挂钩：

您可以这样做：

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

钩子还不允许你设置颜色的动画，但我确信可以添加一些工作

示例：

直接回答 使用Edwin Martin的（扩展了

.animate

方法），您可以简单地使用“boxShadow”的常规语法，并且该方法的每个方面（颜色、x和y偏移、模糊半径和扩散半径）都会设置动画。它包括多个阴影支持

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

---

改用CSS动画 jQuery通过更改DOM元素的

style

属性来设置动画，这可能会导致特殊的惊喜，并将样式信息移出样式表

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

@关键帧阴影脉冲{
0% {
盒影：0px 0px 10px 0px hsla（0,0%，0,1）；
}
100% {
盒影：0px 0px 5px 0px hsla（0,0%，0,0）；
}
}
.阴影脉冲{
动画名称：阴影脉冲；
动画持续时间：1.5s；
动画迭代次数：1；
动画计时功能：线性；
}

然后，您可以使用本机的

animationend

事件将动画的结尾与您在JS代码中所做的同步：

$（元素）.addClass（'shadow-pulse'）；
$（元素）.on（'animationend'，function（）{
$（元素）.removeClass（'shadow-pulse'）；
//做点别的。。。
});

以下是一个如何在没有插件的情况下实现的示例：但它没有使用插件所附带的额外功能，但我个人喜欢看到（并理解）疯狂背后的方法。

如果你不想使用插件，可以使用一些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动画的完整文档，你的魔法之路

我喜欢ShaneSace解决方案！ 使用ID的类intead，可以使用jQuery addClass/delay/removeClass向任何元素添加/删除效果：

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

---

cssHooks是1.4.3的一部分还是一个插件？如果你有jQuery文档的话，我希望有一个链接，这听起来很有趣。@1.4.3的超现实部分。cssHooks还没有太多的文档记录，但你可以深入到sorce并查看它：Brandon Arron一直在玩cssHooks：@Blowsie可能是boxshadow cssHook的问题。可能和这个问题一样：这似乎不支持插入框阴影，或者我弄错了？@AdamFraser为我工作（在Chrome中测试）我同意，公认的答案最近没有更新。这个插件对我来说工作得很好。使用jQuery 1.9，我似乎无法让它正常工作，没有人遇到过这个问题吗？考虑到它只是在一周前发布的（？），他可能还没有更新它。通读和，看看哪些方法需要修改，如果是紧急的。我使用了你链接的归档文件，而不是他的插件的最新版本，它工作得完美无缺。这就解决了我的问题，谢谢你的快速回复。我昨天尝试了未整理版本和缩小版本，两个版本都给了我相同的错误。我很高兴它现在能工作，我只是希望我不会遇到1.8中解决的任何问题。我也希望Edwin能继续开发这个插件，因为它看起来是最容易使用的版本。确实不错。不知怎的，这个并没有烧掉我运行动画的大部分处理器。我想，但我不确定，这是因为我对关键帧使用了两个百分比范围（0%、50%和100%）。