There is any function to add a smooth effect to an expand search bar on click?
I'm trying to make an input search that expands when we click in the button class = "expand".
I already have this working with this basic jQuery, but the effect is a bit bad, its not soft. I've been looking for information on the web to see if I can add an effect to soften the expansion of the input but can not find anything. Anybody out there know what function I can use jQuery for this?
jQuery
<script type="text/javascript">
$(function() {
$('.expand').click(function() {
$('#test').show(300);
});
});
</script>
HTML:
<div id="search-container">
<span id="search" class="form-container cf">
<form name="form1" >
<input id="test" type="search" placeholder="Search..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" />
<button class="expand" type="submit"><i class="fa fa-search"></i></button>
</form>
</span>
</div>
CSS:
.form-container input {
display:none;