时间戳

首页 > 解决方案 > 用于动画功能效果搜索图标高度的 Jquery 切换操作

javascript - 用于动画功能效果搜索图标高度的 Jquery 切换操作

问题描述

我正在使用单击功能（动画）创建一个搜索字段，但正如您从这个示例中看到的那样：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>

标签： javascriptjqueryhtmljquery-animate

解决方案

正如迈克尔指出的那样，在动画期间有一个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% */
}

推荐阅读