jQuery animate表格单元格宽度百分比重复执行异常问题咨询

这个问题我之前碰到过，本质是jQuery在处理百分比宽度动画时的一个小坑——当目标宽度和当前元素的宽度百分比一致时，内部的计算逻辑会出现偏差：它会错误地将当前的像素宽度值当作百分比来处理，导致临时计算出一个远大于目标值的宽度，随后再回调到设定的66%，就出现了你看到的“先变大再恢复”的异常。

解决方案：执行动画前先判断当前宽度 #

最直接的解决方式是在触发动画前，先计算当前单元格相对于父容器的宽度百分比，只有当它和目标值差距明显时，才执行动画。这样既能避免重复执行无意义的动画，也能彻底解决异常问题。

示例代码如下：

$(document).ready(function(){ 
  $('table').click(function(){ 
    const $targetCell = $('.first');
    const parentWidth = $targetCell.closest('table').width(); // 获取表格总宽度
    const currentWidthPercent = ($targetCell.width() / parentWidth) * 100;
    
    // 考虑到浮点计算的精度问题，用近似值判断
    if (Math.abs(currentWidthPercent - 66) > 0.1) {
      $targetCell.animate({'width':'66%'}, 400);
    }
  }); 
});

补充说明 #

• 为什么不用直接读取$targetCell.css('width')？因为jQuery返回的可能是像素值（比如264px）而非百分比，所以通过计算相对宽度的方式更可靠。
• 如果你的表格宽度是动态变化的，这种方式依然有效，因为它每次都会基于当前的表格宽度计算百分比。
• 另一种替代思路是直接使用像素值作为动画目标（比如表格固定400px时，66%对应264px），但这种方式灵活性差，当表格宽度改变时需要同步修改动画目标值，所以更推荐上面的判断方案。

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