用于动画功能的Jquery切换操作会影响搜索图标的高度

Question

我正在使用点击功能（动画）创建一个搜索字段，但正如您在此示例中所看到的：https://www.ve.com/search当您点击搜索图标时，它会上下移动，我不知道为什么会这样发生。

我确信这是非常简单但却不确定我做错了什么。

以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $(".hs-search-field__bar").animate({width: "toggle"});
                  if ($(".hs-search-field__bar").is(':visible'))
                $(".hs-search-field__bar").css('display','inline-block');
            });  
        });
    </script>
<div class="search-separator"> 
    <div class="hs-search-field"> 
        <div class="hs-search-field__bar" style="display:none;" > 
          <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>

Answer 1

迈克尔指出，在动画期间有一个overflow: hidden;

解决方法

  

不要使用jQuery动画。

通过CSS动画

<div class="hs-search-field__bar">
  ...
</div>


$(".search-button").on("click", function(){
    $(".hs-search-field__bar").toogleClass("show");
});

<强> CSS

.hs-search-field__bar{
    width: 0;
    overflow:hidden;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

.hs-search-field__bar.show{
    width:auto; /* or some width you want, including 100% */
}