如何在Ajax更新输入框size值时实现宽度动画效果？

嘿，我看到你的问题了，咱们一步步来搞定这个输入框宽度的平滑动画效果。先说说几个导致动画失效的关键问题，再给你完整的解决方案：

问题排查 #

1. 选择器错误：你JS里写的$("value")是在寻找<value>标签，但你的输入框是通过id="value"定义的，正确的选择器应该是$("#value")——这是最基础的问题，不然你的JS代码根本找不到目标元素。
2. size属性不支持过渡：HTML的size属性是原生属性，CSS的transition只对CSS属性生效（比如width），直接修改size自然不会有动画效果。

完整解决方案 #

我们改用CSS的width属性控制宽度，配合过渡动画，同时用更准确的方式计算内容所需宽度：

1. 添加CSS过渡样式

给输入框定义宽度过渡动画：

#value {
  transition: width 2s ease; /* 定义宽度变化的过渡效果，时长2秒 */
  width: auto; /* 初始宽度设为自适应，也可以设固定值比如50px */
  box-sizing: border-box; /* 避免内边距/边框影响宽度计算 */
}

2. 修正JavaScript代码

修复选择器，改用val()设置值，通过scrollWidth获取内容实际宽度：

function refresh_price() {
  $.ajax({
    url: "query.php?currency=<?=$currencycode;?>"
  }).done(function(data) {
    const $input = $("#value");
    // 设置输入框的值
    $input.val(data);
    
    // 获取内容实际需要的宽度（scrollWidth是元素内容的真实宽度，加10px避免内容截断）
    const targetWidth = $input[0].scrollWidth + 10;
    // 设置CSS宽度，触发过渡动画
    $input.css("width", targetWidth + "px");
  });
}

// 页面首次加载执行
refresh_price();
// 定时刷新（每5秒一次）
setInterval(refresh_price, 5000);

3. 保持你的HTML代码

<input id="value" type="text" value="..." readonly>

为什么这样有效？ #

• scrollWidth会自动计算输入框内容的真实宽度，比用字符长度（data.length）更准确（不同字体的字符宽度不一样）。
• 直接修改CSS的width属性，配合预先定义的transition，就能触发平滑的宽度变化动画。
• 不管是首次加载还是定时刷新，只要Ajax返回新内容，就会重新计算宽度并触发动画。

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