使用jQuery为box-shadow制作动画的正确方法

Question

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

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

Answer 1

直接回答

使用Edwin Martin的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;
}

然后,您可以使用native animationend属性将动画的结尾与您在JS代码中执行的操作同步:

$(element).addClass('shadow-pulse');
$(element).on('animationend', 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'
});

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

示例: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/

如果你想要关于CSS动画的完整文档,你的漫画之路从这里开始..