创建搜索动画，将文本输入部分从右向左滑动 [英] Create a search animation sliding the text input part from the right to left

问题描述

当我将鼠标悬停在搜索循环图标上时，我想在其上创建动画.首先，仅循环显示如下图所示:

I want to create a animation on search loop icon when hovering in it.First the loop only is displayed like this picture

当我将鼠标悬停在循环图标上时，文本输入必须从右侧出现，其宽度向左增加，并获得100％的宽度.我尝试了此代码

And when I will hover on the loop icon the text input must appear from the right inceasing its width to left and get 100% width. I tried this code

jQuery(".main_search .search-field").focusin(function() {
        jQuery(".main_search .screen-reader-text").css( "display", "none");
    });
    jQuery(".main_search .search-field").focusout(function() {
        jQuery(".main_search .screen-reader-text").css( "display", "block");
    });

但是它看起来像个错误.HTMl结构

But it looks like a bug. HTMl structure

<div class="about_search">
                <form role="search" method="get" class="search-form" action="http://argentarius.ipoint.com.mt/">
            <label>
                <span class="screen-reader-text">Search for:</span>
                <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
            </label>
            <input type="submit" class="search-submit" value="Search">
        </form>                </div>

推荐答案

这是您的固定

var CloseAnimationTimeout;

jQuery('.about_search .search-submit, .about_search .search-form label ').mouseover(function() {
    clearTimeout(CloseAnimationTimeout);
    jQuery('.about_search .search-form label').stop().animate({
      width: '94%'
    }, 'slow');
  })
  .mouseout(function() {
    CloseAnimationTimeout = setTimeout(function() {
      jQuery('.about_search .search-form label').stop().animate({
        width: '0%'
      }, 'slow');
    }, 500);
  });

.about_search .search-form {
  height: 40px;
  margin-right: 20px;
  position: relative;
}
.about_search .search-form label {
  width: 0%;
  height: 38px;
  transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -webkit-transition: opacity 0.5s linear;
  -o-transition: opacity 0.5s linear;
  border: 0;
  background: #000;
  margin-top: 50px;
  right: 0;
  float: right;
}
.about_search .screen-reader-text {
  display: none;
  position: absolute;
  padding-left: 50px;
  line-height: 40px;
  font-size: 16px;
  color: #000;
}
.about_search .search-field {
  width: 100%%;
  height: 100%;
  padding: 0px;
  background: #000;
  color: #fff;
  border: 0;
}
.about_search .search-submit {
  background: url('http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/loop.png') no-repeat #11213b;
  padding: 19px;
  margin-top: 0px;
  background-position: 9px 9px;
  position: relative;
  z-index: 100;
  outline: none;
  margin-left: -27px;
  border: none;
  font-size: 0;
  float: right;
  height: 18px;
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="about_search">
  <form role="search" method="get" class="search-form" action="http://argentarius.ipoint.com.mt/">
    <input type="submit" class="search-submit" value="Search" />
    <label style="width: 0%;">	<span class="screen-reader-text">Search for:</span>

      <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
    </label>
  </form>
</div>

EXPLANATION:

• 如果要从右侧打开输入，则需要通过将其CSS设置为"right:0;"将其锚定在右侧.然后将其浮动到右侧.

• if you want the input to open up from the right, you need to anchor it to the right by setting its css to 'right:0;' and by floating it to the right.

由于浮动是按照元素在html中的顺序堆叠的，因此您需要将按钮移到标签前才能正确浮动.

since floating stacks the elements by their order in the html, you need to move the button before the label for proper floating.

标签内部的输入始终需要拉伸到100％，因为您可以动态更改标签的宽度，所以内部的inout会进行调整.

the input inside the label needs to be stretched to 100% at all times, because you change the width of the label dynamically, the inout inside will adjust.

因为标签的颜色是黑色，所以我将输入的颜色更改为白色.

since color of label is black, i changed the color of the input to white.

将悬停输入/输出处理程序从窗体更改为实际按钮+标签本身，以提高性能.

changed the hover in/out handler from the form to the actual button + the label itself for better performance.

使用超时功能为关闭动画添加了延迟，以防止每当您移动鼠标时它就会卡住和关闭

added a delay to the closing animation using a timeout function to prevent it from stuttering and closing whenever you move the mouse

这篇关于创建搜索动画，将文本输入部分从右向左滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！