创建一个从右到左滑动文本输入部分的搜索动画

Question

我想在悬停在其中时在搜索循环图标上创建一个动画。首先只显示循环，如图

当我将鼠标悬停在循环图标上时，文本输入必须从右侧出现，并将其宽度向左移动并获得100％的宽度。我试过这段代码

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");
    });

但它看起来像一个bug。 HTMl结构

<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>

Answer 1

您发布的代码不会对图片做任何事情，因为您无法专注或专注于图片。

首先你需要使用

jQuery(".main_search .search-field").mouseover(function(){});
/* and*/
jQuery(".main_search .search-field").mouseout(function(){});

我做了jsfiddle that does the trick

我希望这就是你要找的东西

旁注：$(element).stop()用于阻止动画进入队列。如果你不使用stop()并且用户一直悬停在div或图片上，那么动画就会排队，这有点令人讨厌。

Answer 2

以下是您的固定 Fiddle ：

＆＃13;

＆＃13;

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);
  });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强>说明

• 如果您想要从右侧打开输入，则需要通过将其css设置为＆＃39; right：0;＆＃39;来将其固定到右侧。并将其浮动到右边。

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

• 标签内的输入必须始终拉伸至100％，因为您动态更改标签的宽度，内部的输入将会调整。

• 由于标签颜色为黑色，我将输入颜色改为白色。

• 将悬停输入/输出处理程序从表单更改为实际按钮+标签本身以获得更好的性能。

• 使用超时功能为关闭动画添加延迟，以防止它在您移动鼠标时出现卡顿和关闭