如何使用jQuery animate()实现box-shadow动画效果？

嘿，我来帮你搞定这个hover时的box-shadow动画问题～

你的问题出在jQuery原生的animate方法不支持直接动画复合CSS属性，比如box-shadow这种包含多个值（x偏移、y偏移、模糊度、颜色）的属性，它只能处理单一数值类型的属性（比如top、width这类）。下面给你两种解决方案，优先推荐第一种哦：

方案一：用CSS Transition实现（更简单高效） #

其实这个需求完全不需要JavaScript，用CSS的transition就能轻松实现，代码更简洁，性能也更好：

首先给你的li元素添加基础样式（记得加上position: relative，不然top属性不会生效）：

#skill_list li {
  position: relative;
  /* 定义过渡动画的参数：所有属性、时长100ms、linear缓动 */
  transition: all 0.1s linear;
}

然后写hover伪类的样式：

#skill_list li:hover {
  top: -5px;
  box-shadow: 10px 10px red;
}

这样鼠标悬停时就会自动触发动画，离开时也会平滑恢复，完全不用写JS代码～

方案二：用jQuery实现（需要扩展支持） #

如果一定要用jQuery来做，你有两个选择：

1. 引入jQuery UI #

jQuery UI扩展了原生animate的能力，支持box-shadow这类复合属性。引入之后，你只需要稍微调整一下box-shadow的写法（尽量写完整的属性值）：

$(document).ready(function () {
  $('#skill_list li').hover(function () {
    $(this).animate({ 
      top: "-5px", 
      boxShadow: "10px 10px 0 red" // 补充模糊度参数，让jQuery UI更好识别
    }, 100, "linear").clearQueue();
  }, function () {
    $(this).animate({ 
      top: "0px", 
      boxShadow:"0px 0px 0 red" 
    }, 100, "linear").clearQueue();
  });
});

2. 自定义step函数（无需额外库） #

如果不想引入jQuery UI，可以通过animate的step函数手动更新box-shadow属性，用一个自定义数值属性作为动画的过渡变量：

$(document).ready(function () {
  $('#skill_list li').hover(function () {
    $(this).animate(
      { 
        top: "-5px",
        // 自定义两个数值属性，用来控制阴影的偏移量
        shadowX: 10,
        shadowY: 10
      }, 
      {
        duration: 100,
        easing: "linear",
        step: function(now, fx) {
          // 每次动画帧更新时，同步设置box-shadow
          if (fx.prop === "shadowX" || fx.prop === "shadowY") {
            $(this).css("box-shadow", `${fx.shadowX}px ${fx.shadowY}px red`);
          }
        },
        // 动画结束后确保样式正确
        complete: function() {
          $(this).css("box-shadow", "10px 10px red");
        }
      }
    ).clearQueue();
  }, function () {
    $(this).animate(
      { 
        top: "0px",
        shadowX: 0,
        shadowY: 0
      }, 
      {
        duration: 100,
        easing: "linear",
        step: function(now, fx) {
          if (fx.prop === "shadowX" || fx.prop === "shadowY") {
            $(this).css("box-shadow", `${fx.shadowX}px ${fx.shadowY}px red`);
          }
        },
        complete: function() {
          $(this).css("box-shadow", "0px 0px");
        }
      }
    ).clearQueue();
  });
});

总结 #

个人强烈推荐用CSS Transition的方案，不仅代码少，而且浏览器对CSS动画的优化比JS动画更好，体验更流畅～

内容的提问来源于stack exchange，提问作者Kashyap Pavra