搜索框聚焦伸展

html中对应的表单

点击(此处)折叠或打开

1. <form target=“_blank” action=“/search” accept–charset=“UTF-8” method=“get”>
   
2.     <input type=“text” id=“q” class=“search-input” name=“q” placeholder=“搜索” value=“”>
3. </form>

对应的js
$(function(){
$(“#q”).focus(function(){
    $(“#q”).animate({“width”:300},400);
  });
  $(“#q”).blur(function(){
    $(“#q”).animate({“width”:200},400);
  });
});