创建一个搜索动画，将文本输入部分从右向左滑动

Question

我想在鼠标悬停在 it.First 时在搜索循环图标上创建一个动画，循环仅显示如下图

当我将鼠标悬停在循环图标上时，文本输入必须从右侧出现，向左增加宽度并获得 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");
    });

但它看起来像一个错误。 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:

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>

解释：

如果您希望输入从右侧打开，您需要通过将其 css 设置为 'right:0;' 并将其浮动到对了。
由于浮动是按元素在 html 中的顺序堆叠的，您需要将按钮移到标签之前才能正确浮动。
label里面的input需要一直拉伸到100%，因为你动态改变label的宽度，里面的inout也会随之调整。
因为label的颜色是黑色，我把input的颜色改成了白色。
将悬停 in/out 处理程序从表单更改为实际按钮 + 标签本身以获得更好的性能。
使用超时功能为关闭动画添加延迟，以防止它在您移动鼠标时卡顿和关闭

创建一个搜索动画，将文本输入部分从右向左滑动

Create a search animation sliding the text input part from the right to left

search

jquery

animation