Search - Expandable Animation

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by bizamajig

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="col-md-3 col-sm-3">
  <div class="input-group">
      <input class="form-control" placeholder="Search"></input>
</div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

$(function(){
  var form = $('.input-group');
  form.mouseenter(function(){
    form.animate({ "width": "+=" + form.width() * 1.4}, "slow");
  }).mouseout(function(){
    form.animate({ "width": '100%'}, "slow");
  });
});