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

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

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

这是你的固定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会调整。

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

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

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

Answer 2

您发布的代码不会对图片做任何事情，因为您无法在图片上聚焦或聚焦。

首先你需要使用

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

我发了jsfiddle that does the trick

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

旁注：$(element).stop() 用于阻止动画进入队列。如果您不使用stop() 并且用户一直将鼠标悬停在 div 或图片上，则动画将排队，这有点烦人。