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

用jQuery 动画 属性的正确语法是哪一种?

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

回答:

直接回答

使用埃德温·马丁的 ,它扩展了.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动画盒子阴影的正确方法 的全部内容, 来源链接: www.h5w3.com/qa/411910.html

回到顶部