jquery实现搜索框从中间向两边扩展(左右放大)
显示效果:
隐藏效果:
前端核心代码如下:
<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实现搜索框从中间向两边扩展(左右放大)的更多相关文章
- jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框
jQuery实现搜索框插件 豆瓣音乐接口实现豆瓣搜索框 豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...
- 用jQuery实现搜索框的过滤效果
遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...
- chosen.jquery.js 搜索框只能从头匹配的解决思路+方法
chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...
- Jquery实现搜索框提示功能
博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发 ...
- 使用jquery实现搜索框的位置变换
现在很多的网站都存在这样一个效果:当用户搜索信息后,滚动内容时,搜索框的位置会产生变化,会固定在某个位置,方便用户进行再次搜索.比如百度图片.为了提高系统用户体验,也想加入这个效果,经过小段时间摸索, ...
- ASP.NET JQuery 随笔-搜索框默认提示
一.文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. ...
- jQuery+HTML5弹出创意搜索框层
效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...
- 使用jQuery和CSS3生成的搜索框变形全屏搜索效果
在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!
- 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)
需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...
随机推荐
- 二、java基础-运算符_控制语句_break_continue_return
1.运算符 1)算术运算符:6个+ — * \ % ++ --2)关系运算符:6个> >= < <= == !=3)布尔运算符&&并且 ||或 ...
- 2017北京网络赛 F Secret Poems 蛇形回路输出
#1632 : Secret Poems 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 The Yongzheng Emperor (13 December 1678 – ...
- Ubuntu系统配置Zabbix前端及中文乱码解决方案
Ubuntu系统配置Zabbix前端及中文乱码解决方案 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装zabbix 博主推荐阅读: https://www.cnblogs ...
- P1067 试密码
P1067 试密码 转跳点:
- 【转置】使用mysql转置表格行和列
1.原始表 2.查询结果表 3.查询语句 1 SELECT 2 year1, 3 SUM( CASE WHEN mon= 1 THEN account END ) AS m1, 4 SUM( CASE ...
- 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: ...
- mysql实现ORACLE的connect by prior父子递归查询
oracle中有connect by prior ,可以实现父子递归查询.而mysql中没有这种功能,但我们可以变通实现. 比如一个表: Table Name: tb_Tree Id | Parent ...
- 07 MySQL常用内置函数
常用函数 1.字符串函数 CONCAT(str1,str2,..,strN) 将str1,str2..strN 拼接成一个字符串,当这里有任何一个为NU ...
- java正则表达式校验密码必须是包含大小写字母、数字、特殊符号的8位以上组合
一.需求:密码必须是包含大写字母.小写字母.数字.特殊符号(不是字母,数字,下划线,汉字的字符)的8位以上组合 二.方案:利用正则表达式来校验 三.思路:排除法 1.排除大写字母.小写字母.数字.特殊 ...
- Codeforces Round #618 (Div. 2) 小号上紫之路
这一场涨了不少,题也比较偏思维,正好适合我 A. Non-zero 我们记录这些数字的总和sum,并且记录0的个数zero,显然答案应该是这些0的个数,注意如果sum+zero==0的话答案要额外加一 ...