显示效果:

隐藏效果:

前端核心代码如下:

<div class="search-icon col-md-2 col-sm-2 col-xs-4 col-md-offset-5 col-sm-offset-5 col-xs-offset-4">
<img src="../status/images/search.png" alt="">
</div>
<div class="search-input row">
<div class="search-show col-md-6 col-sm-10 col-xs-10 col-md-offset-3 col-sm-offset-1 col-xs-offset-1">
<div class="input row">
<input type="text" class="col-md-9 col-sm-9 col-xs-9" placeholder="请输入你想了解的内容">
<div class="search-btn col-md-3 col-sm-3 col-xs-3">
<div class="search-name">搜索</div>
<!-- <img src="../status/images/search.png" alt="" style="" /> -->
</div>
</div>
</div>
</div>

css就不在这里显示了,可以自己定义

下面就来说说jquery如何实现效果

显示

$('.search-icon').fadeOut(0,()=>{
$('.search-input').fadeIn().css({'width':'0%','position':'absolute','left':'50%'}).animate({
'width':'100%',
'margin-left':'-50%'
},500,'linear',()=>{
$('.input').fadeIn(500)
})
})

隐藏

$('.input').fadeOut(700,function(){
$('.search-input').animate({
'width':'0%',
'margin-left':'0%'
},700,'linear',()=>{
$('.search-icon').fadeIn(700)
})
})

方法说明:

fadeOut 隐藏
fadeIn 显示
animate 动画

jquery实现搜索框从中间向两边扩展(左右放大)的更多相关文章

  1. jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框

    jQuery实现搜索框插件 豆瓣音乐接口实现豆瓣搜索框 豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...

  2. 用jQuery实现搜索框的过滤效果

    遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...

  3. chosen.jquery.js 搜索框只能从头匹配的解决思路+方法

    chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...

  4. Jquery实现搜索框提示功能

    博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发 ...

  5. 使用jquery实现搜索框的位置变换

    现在很多的网站都存在这样一个效果:当用户搜索信息后,滚动内容时,搜索框的位置会产生变化,会固定在某个位置,方便用户进行再次搜索.比如百度图片.为了提高系统用户体验,也想加入这个效果,经过小段时间摸索, ...

  6. ASP.NET JQuery 随笔-搜索框默认提示

    一.文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. ...

  7. jQuery+HTML5弹出创意搜索框层

    效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...

  8. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

  9. 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)

    需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...

随机推荐

  1. 二、java基础-运算符_控制语句_break_continue_return

    1.运算符 1)算术运算符:6个+ — * \ % ++  --2)关系运算符:6个>  >=  <  <=   ==   !=3)布尔运算符&&并且  ||或 ...

  2. 2017北京网络赛 F Secret Poems 蛇形回路输出

    #1632 : Secret Poems 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 The Yongzheng Emperor (13 December 1678 – ...

  3. Ubuntu系统配置Zabbix前端及中文乱码解决方案

    Ubuntu系统配置Zabbix前端及中文乱码解决方案  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装zabbix 博主推荐阅读: https://www.cnblogs ...

  4. P1067 试密码

    P1067 试密码 转跳点:

  5. 【转置】使用mysql转置表格行和列

    1.原始表 2.查询结果表 3.查询语句 1 SELECT 2 year1, 3 SUM( CASE WHEN mon= 1 THEN account END ) AS m1, 4 SUM( CASE ...

  6. SP2-0157: unable to CONNECT to ORACLE after 3 attempts, exiting SQL*Plus

    [oracle@jtwy02 ~]$ sqlplus '/as sysdba' SQL*Plus: Release 11.2.0.4.0 Production on Sat Oct 13 14:14: ...

  7. mysql实现ORACLE的connect by prior父子递归查询

    oracle中有connect by prior ,可以实现父子递归查询.而mysql中没有这种功能,但我们可以变通实现. 比如一个表: Table Name: tb_Tree Id | Parent ...

  8. 07 MySQL常用内置函数

    常用函数     1.字符串函数         CONCAT(str1,str2,..,strN)             将str1,str2..strN 拼接成一个字符串,当这里有任何一个为NU ...

  9. java正则表达式校验密码必须是包含大小写字母、数字、特殊符号的8位以上组合

    一.需求:密码必须是包含大写字母.小写字母.数字.特殊符号(不是字母,数字,下划线,汉字的字符)的8位以上组合 二.方案:利用正则表达式来校验 三.思路:排除法 1.排除大写字母.小写字母.数字.特殊 ...

  10. Codeforces Round #618 (Div. 2) 小号上紫之路

    这一场涨了不少,题也比较偏思维,正好适合我 A. Non-zero 我们记录这些数字的总和sum,并且记录0的个数zero,显然答案应该是这些0的个数,注意如果sum+zero==0的话答案要额外加一 ...