Edit in JSFiddle

$('input').focus(function(){
     t = $(this);
    if(t.val()==='foo bar'){t.val('');
    }t.animate({width: '250px'},400);
}); 

$('input').blur(function(){
     t = $(this);
    if(t.val()===''){t.val('foo bar');
    }t.animate({width: '140px'},500);
});

input{margin:50px;width:140px;}

            <input type="search" value="foo bar">