这是一款jQuery+CSS3实现的带有动画效果的搜索框代码，创意展开收缩搜索框特效下载。

js代码
<script type=\”text/javascript\”>
function searchToggle(obj, evt){
var container = $(obj).closest(\’.search-wrapper\’);

if(!container.hasClass(\’active\’)){
 container.addClass(\’active\’);
 evt.preventDefault();
}
else if(container.hasClass(\’active\’) && $(obj).closest(\’.input-holder\’).length == 0){
 container.removeClass(\’active\’);
 // clear input
 container.find(\’.search-input\’).val(\’\’);
 // clear and hide result container when we press close
 container.find(\’.result-container\’).fadeOut(100, function(){$(this).empty();});
}
}

function submitFn(obj, evt){
value = $(obj).find(\’.search-input\’).val().trim();

_html = \”Yup yup! Your search text sounds like this: \”;
if(!value.length){
_html = \”Yup yup! Add some text friend :D\”;
}
else{
_html += \”<b>\” + value + \”</b>\”;
}

$(obj).find(\’.result-container\’).html(\'<span>\’ + _html + \'</span>\’);
$(obj).find(\’.result-container\’).fadeIn(100);

evt.preventDefault();
}
</script>