var long = '250px'; var short = '140px'; $('input').focus(function(){ if($(this).val()==='検索する'){ $(this).val(''); } //animate the box $(this).animate({ width: long},400); }); $('input').blur(function(){ if($(this).val()===''){ $(this).val('検索する'); } $(this).animate({ width: short},500); });
input{margin:30px;}
<input type="search" value="検索する">