Действие переключения Jquery для эффектов анимации. Высота значка поиска. - PullRequest
Новая
       9

Действие переключения Jquery для эффектов анимации. Высота значка поиска.

0 голосов
/ 21 мая 2018

Я создаю поле поиска с функцией щелчка (анимация), но, как вы можете видеть из этого примера: 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>

1 Ответ

0 голосов
/ 21 мая 2018

Как указал Майкл, во время анимации есть 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% */
}
...