javascript - 使用 jquery animate 动画化搜索栏

Question

首先是fiddle

我正在尝试制作一个搜索表单的动画，现在它是从左到右开始的，我希望它是从右到左开始的。我还想为动画添加一个很好的缓动。

HTML 代码:

<form role="form" class="search-form-2">
    <i class="fa fa-search"></i>
    <div class="search-toggle" style="display:none">
        <input type="text" class="search-form" autocomplete="off" placeholder="Search" size="25">
    </div>
</form>

JS代码:

$("i.fa.fa-search").click(function () {
    $(".search-toggle").animate({width: 'toggle'});;
});

如有任何帮助，我们将不胜感激。

Answer 1

将您的.search-toggle 放入id="container" 的div 中。将 CSS 属性 float: right 添加到 .search-toggle，您的搜索框将从右到左移动。

演示 Fiddle

HTML:

<form role="form" class="search-form-2"> <i class="fa fa-search"></i>
  <div id="container">
    <div class="search-toggle" style="display:none">
      <input type="text" class="search-form" autocomplete="off" placeholder="Search" size="25" />
    </div>
  </div>
</form>

CSS:

i.fa {
    cursor: pointer;
    position: relative;
    left: 300px;
    top: 30px;
    z-index: 10000;
    opacity: 0.8;
}
input.search-form {
    padding: 10px;
}
#container {
    width: 300px;
}
.search-toggle {
    float: right;
}