javascript - 带有jQuery动画的动画搜索栏

原文 标签 javascript jquery html css animation

首先是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'});;
});


任何帮助,将不胜感激。

最佳答案

将您的.search-togglediv放在id="container"中。将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;
}

关于javascript - 带有jQuery动画的动画搜索栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26446498/

相关文章:

javascript - 如何在ScalaJS/PhantomJS中使用log4javascript

html - 我可以在现有网页上使用 wordpress 吗?

html - 如何在 float 元素之间产生中断

javascript - Elementor - 在调整窗口大小之前,滚动 "motion-effects"不起作用

javascript - 未捕获的类型错误 : Object #<Object> has no method 'vibrate'

jquery - 使Web应用程序与掌上电脑兼容

javascript - 如何使用Javascript从文件夹中获取文件数组

jquery - 从触发另一个元素的事件的单击元素中检索数据属性

javascript - 删除之前在 HTML5 Canvas 上绘制的线条

javascript - 为什么子对象没有使用模块模式的父方法?