jQuery animate切换搜索栏时搜索图标上下跳动问题排查

首先咱们来拆解你遇到的图标跳动问题，结合代码来看，大概率是元素布局的垂直对齐规则和动画执行时的display属性切换冲突导致的，具体分析和解决方案如下：

问题根源分析 #

1. animate({width: "toggle"})的默认行为冲突：jQuery的width:toggle动画在显示元素时，会先把原本display:none的元素设为display:block（这是动画的默认处理逻辑），但你紧接着又手动把它改成inline-block。这个瞬间的display属性切换，会让浏览器重新计算布局，导致相邻的搜索按钮出现位置跳动。
2. 未明确垂直对齐规则：搜索栏和按钮都是行内/行内块元素，浏览器默认用baseline（基线）对齐。当搜索栏从无到有、尺寸发生变化时，基线位置会跟着改变，按钮的垂直位置也就随之波动。

针对性解决方案 #

方案1：统一布局属性，避免display切换波动 #

放弃width:toggle的写法，改用固定宽度的显式动画，同时提前把搜索栏的display设为inline-block，从根源避免布局突变：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 提前初始化搜索栏的布局状态
  const searchBar = $(".hs-search-field__bar");
  searchBar.css({
    display: "inline-block",
    width: 0,
    overflow: "hidden"
  });

  $("button").click(function(){
    // 根据当前宽度判断是展开还是收起
    const targetWidth = searchBar.width() === 0 ? "220px" : 0;
    searchBar.animate({ width: targetWidth });
  });
});
</script>
<div class="search-separator">
  <div class="hs-search-field">
    <div class="hs-search-field__bar">
      <form action="/{{ site_settings.content_search_results_page_path }}">
        <input type="search" class="hs-search-field__input" name="term" autocomplete="off" placeholder="{{ module.placeholder }}">
      </form>
    </div>
    <button class="search-button">
      <i class="fa fa-search"></i>
    </button>
  </div>
</div>

方案2：添加垂直对齐样式，固定按钮位置 #

给搜索栏和按钮设置统一的垂直对齐规则，确保它们始终保持同一水平线，不受元素尺寸变化影响：

/* 可以放在你的CSS文件或<style>标签中 */
.hs-search-field__bar, .search-button {
  vertical-align: middle;
}

额外优化：缓存DOM元素提升性能 #

把重复查询的.hs-search-field__bar缓存起来，减少DOM查询次数，让代码更高效（已经包含在方案1的代码里了）。

为什么原代码会出现跳动？ #

当你点击按钮时，width:toggle会先把搜索栏从display:none转为display:block，此时搜索栏会独占一行，按钮被挤到下方；紧接着你手动设置display:inline-block，按钮又回到行内位置。这个瞬间的布局切换，就造成了视觉上的上下跳动。改用宽度从0到目标值的动画，全程保持inline-block属性，布局会稳定很多。

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