html搜索框点击折叠隐藏效果,jquery点击伸缩效果input搜索框

jquery点击伸缩效果input搜索框 调用说明：$.focusblurmenu("#searchkey","300px","300"); 依次是$.focusblurmenu("input的ID","展开的宽度","自定义动画的时间");

我在代码狂人看到他的网站搜索框是这个点击伸缩效果input搜索框css3代码，看着还挺好玩， 很明显他根本就不兼容IE6、7、8，css3是个趋势不过想在中国普及那是N年后的事情了，目前要用这个帅帅的效果还得使用NX的jquery特效。

下面我们动手来制作这个效果，用脚趾头想一想，这个效果不需要重写，借用一下input失去焦点和获得焦点jquery焦点事件插件 稍作改造就OK了。

把input失去焦点和获得焦点jquery焦点事件插件的代码复制过来，插件名字改一下focusblurmenu。呵呵，添加一个jquery自定义动画$(this).animate({width:'+250px'}, "300").addClass("searchkeyblur");

input搜索框获得焦点样式由 类.searchkeyfocus 来控制，虽然css3有控制获得焦点样式，考虑兼容性此处不采用，css3的东西要学习要知道，但不一定要用。

jquery点击伸缩效果input搜索框的css样式基本写的比较丑陋一点点，不过里面一些必须的css样式已经写出来了，你要做的是在粉饰一下就很OK。

此jquery特效代码不提供rar压缩包文件下载，因为没有图片和样式文件要下载，查看演示，把代码保存到本地即可。

↓ 查看全文