使用jQuery动画盒子阴影的正确方法

用jQuery动画box-shadow属性的正确语法是哪种？

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

直接回答

使用埃德温·马丁的jQuery插件影子动画，它扩展了.animate方法，你可以简单地使用正常的语法与“boxShadow”和的每一个方面-颜色，在x轴和y偏移时，模糊半径和传播半径-变得活跃起来。它包括多个阴影支持。

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

改用CSS动画

jQuery通过更改styleDOM元素的属性来进行动画处理，这可能会引起特殊性的意外并将样式信息移出样式表。

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

@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.4.3+，则可以利用添加的cssHooks代码。

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

您可以执行以下操作：

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

该挂钩还不能让您设置颜色的动画，但是我敢肯定可以添加一些工作。

示例：http：//jsfiddle.net/petersendidit/w5aAn/

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

如果您想要有关CSS动画的完整文档，请从这里开始巫术之路。

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

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

这是不使用插件的情况下的示例：jQuery动画盒 但是它没有使用插件附带的额外功能，但是我个人很想看到（并理解）疯狂背后的方法。