.animate() is the jQuery function you’re going to want to have a look at. Very handy.
Here’s a working example for your particular question:
And a complete html workup:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.search { width:300px; }
.input-group { position:relative; float:right; }
#btn-search { cursor:pointer; position:absolute; padding:3px 8px; }
input { width:0; padding-left:20px; border:1px solid transparent; }
</style>
</head>
<body>
<div class="search">
<form class="form-inline" id="forminline"role="form">
<div class="input-group">
<span class="input-group-btn" id="btn-search">
<div class="btn btn-search"><i class="fa fa-search search-ico">S</i></div>
</span>
<label class="sr-only" for="exampleInputEmail2"><?php _ex( 'Search for:', 'label', 'categories', 'lagnogruppen' ); ?></label>
<input type="search" class="form-control form-search unhovered" id="box-search" placeholder="Search" name="s" />
</div>
</form>
</div>
<script>
$('#btn-search').click(function(){
$('input').css('border-color', '#aaa').animate({
'width' : 200
}, 300).focus().queue(function(){
$(this).addClass('toggled');
$(this).dequeue();
});
});
$('input').hover(
function() {
$(this).removeClass('unhovered');
}, function() {
$(this).addClass('unhovered');
}
);
$(document).click(function(){
if($('input').hasClass('toggled') && $('input').hasClass('unhovered')) {
$('input').animate({
'width' : 0
}, 300).css('border-color', 'transparent').queue(function(){
$(this).removeClass('toggled');
$(this).dequeue();
});;
}
});
</script>
</body>
</html>