如何仅使用jQuery实现元素缩放比例的动画切换？

嘿，这个问题我熟！jQuery本身确实不直接支持transform这类复合CSS属性的原生动画，不过我们可以通过自定义动画属性+step回调函数来完美解决，全程只用jQuery，完全不用CSS过渡——正好符合你的需求！

核心思路 #

我们没法直接让jQuery动画transform: scale()，但可以自定义一个临时属性（比如scaleValue），让jQuery帮我们从当前的缩放值过渡到目标值，然后在每一步动画中，实时把这个临时属性的值赋值给元素的transform: scale()样式，这样就能实现平滑的缩放动画了。

完整实现代码 #

1. 先写一个工具函数，获取元素当前的缩放值

因为你的元素已经设置了transform: scale(0.5)，我们需要先解析出这个当前的scale数值：

function getCurrentScale(element) {
  const transformStyle = $(element).css('transform');
  // 如果元素还没设置transform，默认缩放比例是1
  if (transformStyle === 'none') {
    return 1;
  }
  // 解析transform的矩阵值（2D变换下，第一个值就是scaleX/Y的数值，假设是等比缩放）
  const matrixValues = transformStyle.split('(')[1].split(')')[0].split(',');
  return parseFloat(matrixValues[0]);
}

2. 封装一个通用的缩放动画函数

这个函数接收三个参数：目标元素jQuery对象、目标缩放值、动画时长（可选，默认400ms）：

function animateScale($targetElement, targetScale, duration = 400) {
  // 获取当前的缩放比例
  const currentScale = getCurrentScale($targetElement);
  
  // 用jQuery的animate方法，自定义动画属性
  $targetElement.animate(
    { scaleValue: targetScale },
    {
      duration: duration,
      // 每一步动画都会触发这个回调，实时更新transform样式
      step: function(currentValue) {
        $(this).css('transform', `scale(${currentValue})`);
      },
      // 可选：设置缓动效果，jQuery默认是'swing'，也可以用'linear'
      easing: 'swing'
    }
  );
}

3. 调用示例

假设你的目标元素选择器是.animated-element，直接调用函数就能实现动画：

// 拿到目标元素的jQuery对象
const $myElement = $('.animated-element');

// 从当前的scale(0.5)动画到scale(1.2)，用默认时长400ms
animateScale($myElement, 1.2);

// 或者动画到scale(0.3)，并设置时长为800ms
// animateScale($myElement, 0.3, 800);

为什么之前的代码不行？ #

你之前尝试的方法应该是直接用animate()去修改transform属性，但jQuery的原生animate()只支持数值型的CSS属性（比如width、opacity），像transform这种带字符串格式的复合属性，它没法直接解析和过渡——这就是为什么动画没效果的原因。而我们上面的方法通过自定义一个数值型的临时属性，让jQuery处理数值过渡，再手动映射到transform上，就完美绕开了这个限制。

额外注意事项 #

• 这个实现假设你的元素是等比缩放（scaleX和scaleY值相同），如果需要做不等比缩放，只需要修改getCurrentScale函数，分别提取matrix中的scaleX和scaleY值，然后在animate里同时动画两个自定义属性即可。
• 如果你的元素还设置了其他transform属性（比如rotate、translate），需要在step函数里保留这些属性，比如先获取完整的transform字符串，替换掉scale部分再赋值，不过如果只是单纯缩放的话，上面的代码就足够用了。

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