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

Posted 2023-05-08

【中文标题】如何在 jQuery animate() 中使用 box-shadow？

【英文标题】：How to use box-shadow with jQuery animate()?

【发布时间】：2018-10-12 21:25:55

【问题描述】：

我有一个 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();
)
);

谢谢

【问题讨论】：

您想要的结果是什么？当你运行你拥有的代码时实际发生了什么？

我知道您要求使用 jQuery 解决方案，但您愿意接受仅使用 css 的解决方案吗？ [众所周知，jQuery 在动画性能方面非常慢](css-tricks.com/myth-busting-css-animations-vs-javascript/…

@RyanWilson 盒子阴影没有动画，当我检查元素时，我看到位置属性正在改变，但盒子阴影没有

@Ghostrydr 当然我也可以尝试 css，实际上我正在学习 jquery，所以我想要 jQuery 中的解决方案

@KashyapPavra 可能是因为在您的第二个 .animate() 中您没有更改 boxShadow 属性，事实上，它根本不存在。

【参考方案1】：

直接回答

使用 Edwin Martin 的 jQuery plugin for shadow animation，它扩展了 .animate 方法，您可以简单地使用带有“boxShadow”的普通语法以及它的各个方面 - color ，x 和 y 偏移，blur-radius 和 spread-radius - 被动画化。它包括多个阴影支持。

$(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); 

【讨论】：

这个方法我用过，但是在m情况下好像不行

好像是***.com/a/9197026/5707563的副本

【参考方案2】：

将此添加到您的 css 中并添加到您想要的任何位置

body
  background: #fff;

.box 
  transition: box-shadow .3s;
  width: 300px;
  height: 500px;
  margin: 50px;
  border-radius:10px;
  border: 1px solid #ccc;
  background: #fff;
  float: left;
  

.box:hover 
  box-shadow: 0 0 11px rgba(33,33,33,.2); 

【讨论】：

为什么这有助于或回答明确说“jQuery”的问题？

非常感谢您的方法完美无缺，您能告诉我如何使用 jquery 来完成吗？