Which is the correct syntax to animate the box-shadow property with jQuery?
$().animate({?:"0 0 5px #666"});
Which is the correct syntax to animate the box-shadow property with jQuery?
$().animate({?:"0 0 5px #666"});
使用Edwin Martin的100,它扩展了.animate
方法,你可以简单地使用"boxShadow"的正常语法,它的每一个方面——color、x- and y-offset、blur-radius和spread-radius——都会被动画化.它包括多个阴影支持.
$(element).animate({
boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
});
jQuery animates by changing the style
property of DOM elements, which can cause surprises with specificity and moves style information out of your stylesheets.
I can't find browser support stats for CSS shadow animation, but you might consider using jQuery to apply an animation-based class instead of handling the animation directly. For example, you can define a box-shadow animation in your stylesheet:
@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...
});