jQuery切换动作，动画功能会影响搜索图标的高度

Question

I am creating a search field with the click function (animate) but as you can see from this example: https://www.ve.com/search when you click on the search icon it moves up and down and I am not sure why this is happening.

I am sure it is something very simple but not sure what it is I am doing wrong.

Code below:

<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

As Michael pointed out, during the animation there is an overflow: hidden ;

WORKAROUND

Don't use jQuery animations.

Animate via CSS instead

<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% */
}