javascript - 如何在 jQuery animate() 中使用 box-shadow？

Question

我有一个 li 元素，它需要在悬停时为框阴影设置动画，但我无法获得所需的结果，这是我的 javascript 代码：

$(document).ready(function () {
$('#skill_list li').hover(function () {
    $(this).animate({
        top: "-5px",
        boxShadow: "10px 10px red"
    }, 100, "linear").clearQueue();
}, function () {
    $(this).animate({
        top: "0px",
        boxShadow:"0px 0px"
    }, 100, "linear").clearQueue();
})
});

谢谢

标签： javascriptjqueryhtmlcssbox-shadow

Answer 1

直接回答

使用 Edwin Martin 的阴影动画 jQuery 插件，它扩展了该.animate方法，您可以简单地使用带有“boxShadow”的普通语法以及该方法的每个方面 -颜色、x 和 y 偏移量、模糊半径和扩展半径-得到动画。它包括多个阴影支持。

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

使用 CSS

.element{
  transition: all 0.8s ease-in;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}
.element:hover {
  box-shadow: 0px 0px 5px 3px hsla(100, 70%, 60%, 0.8); 
}