Javascript 使用jquery动画设置搜索栏动画
首先,这里是 我正在尝试设置搜索表单的动画,现在它从左到右开始,我希望它从右到左开始。我还想为动画添加一个很好的缓和效果 HTML代码:Javascript 使用jquery动画设置搜索栏动画,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,首先,这里是 我正在尝试设置搜索表单的动画,现在它从左到右开始,我希望它从右到左开始。我还想为动画添加一个很好的缓和效果 HTML代码: <form role="form" class="search-form-2"> <i class="fa fa-search"></i> <div class="search-toggle" style="display:none"> <input type="text"
<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>
任何帮助都将不胜感激 使用
id=“container”
将您的.search开关置于div
中。将CSS属性float:right
添加到。搜索切换
,您的搜索框将从右向左设置动画
演示
HTML:
$("i.fa.fa-search").click(function () {
$(".search-toggle").animate({width: 'toggle'});;
});
<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>
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;
}