前端基础-jQuery的动画效果
阅读目录
一、jQuery中隐藏元素的hide方法
让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局,如果在代码执行的时候,
一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果
$elem.hide()
提供参数:
.hide( options )
当提供hide方法一个参数时,.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作
快捷参数:
.hide("fast / slow")
这是一个动画设置的快捷方式,'fast' 和 'slow' 分别代表200和600毫秒的延时,就是元素会执行200/600毫秒的动画后再隐藏
注意:
jQuery在做hide操作的时候,是会保存本身的元素的原始属性值,再之后通过对应的方法还原的时候还是初始值。
比如一个元素的display属性值为inline,那么隐藏再显示时,这个元素将再次显示inline。
一旦透明度 达到0,display样式属性将被设置为none,这个元素将不再在页面中影响布局
二、jQuery中显示元素的show方法
css中有display:none属性,同时也有display:block,所以jQuery同样提供了与hide相反的show方法
方法的使用几乎与hide是一致的,hide是让元素显示到隐藏,show则是相反,让元素从隐藏到显示
看一段代码:使用上一致,结果相反
$('elem').hide(3000).show(3000)
让元素执行3秒的隐藏动画,然后执行3秒的显示动画。
show与hide方法是非常常用的,但是一般很少会基于这2个属性执行动画,大多情况下还是直接操作元素的显示与隐藏为主
注意事项:
- show与hide方法是修改的display属性,通过是visibility属性布局需要通过css方法单独设置
- 如果使用!important在你的样式中,比如display: none !important,如果你希望.show()方法正常工作,必须使用.css('display', 'block !important')重写样式
- 如果让show与hide成为一个动画,那么默认执行动画会改变元素的高度,高度,透明度
三、jQuery中显示与隐藏切换toggle方法
show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法。
比如显示的元素,那么就要调用hide,反之亦然。 对于这样的操作行为,jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素
基本的操作:toggle();
这是最基本的操作,处理元素显示或者隐藏,因为不带参数,所以没有动画。通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。
- 如果元素是最初显示,它会被隐藏
- 如果隐藏的,它会显示出来
display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline
提供参数:.toggle( [duration ] [, complete ] )
同样的提供了时间、还有动画结束的回调。在参数对应的时间内,元素会发生显示/隐藏的改变,在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。
这个元素其实就是show与hide的方法
直接定位:.toggle(display)
直接提供一个参数,指定要改变的元素的最终效果
其实就是确定是使用show还是hide方法
if ( display === true ) {
$( "elem" ).show();
} else if ( display === false ) {
$( "elem" ).hide();
}
四、jQuery中下拉动画slideDown
对于隐藏的元素,在将其显示出来的过程中,可以对其进行一些变化的动画效果。之前学过了show方法,show方法在显示的过程中也可以有动画,
但是.show()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作。这里将要学习一个新的显示方法slideDown方法
.slideDown():用滑动动画显示一个匹配元素
.slideDown()方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式
常见的操作,提供一个动画是时间,然后传递一个回调,用于知道动画是什么时候结束
.slideDown( [duration ] [, complete ] )
持续时间(duration)是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。
如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400 毫秒的延时。
具体使用:
$("ele").slideDown(1000, function() {
//等待动画执行1秒后,执行别的动作....
});
注意事项:
- 下拉动画是从无到有,所以一开始元素是需要先隐藏起来的,可以设置display:none
- 如 果提供回调函数参数,callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。
- 这个回调函数不设置任何参数,但是 this会设成将要执行动画的那个DOM元素,如果多个元素一起做动画效果,那么要非常注意,
- 回调函数会在每一个元素执行完动画后都执行一次,而不是这组 动画整体才执行一次
五、jQuery中上卷动画slideUp
对于显示的元素,在将其隐藏的过程中,可以对其进行一些变化的动画效果。之前学过了hide方法,hide方法在显示的过程中也可以有动画,
但 是.hide()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作。这里将要学习一个新的显示方法slideUp方法
最简单的使用:不带参数
$("elem").slideUp();
这个使用的含义就是:找到元素的高度,然后采用一个下滑动画让元素一直滑到隐藏,当高度为0的时候,也就是不可见的时,修改元素display 样式属性被设置为none。
这样就能确保这个元素不会影响页面布局了
带参数:
.slideUp( [duration ] [, easing ] [, complete ] )
同样可以提供一个时间,然后可以使用一种过渡使用哪种缓动函数,jQuery默认就2种,可以通过下载插件支持。最后一个动画结束的回调方法。
因为动画是异步的,所以要在动画之后执行某些操作就必须要写到回调函数里面,这里要特别注意
六、jQuery中上卷下拉切换slideToggle
slideDown与slideUp是一对相反的方法。需要对元素进行上下拉卷效果的切换,jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素
基本的操作:slideToggle();
这是最基本的操作,获取元素的高度,使这个元素的高度发生改变,从而让元素里的内容往下或往上滑。
提供参数:.slideToggle( [duration ] ,[ complete ] )
同样的提供了时间、还有动画结束的回调。在参数对应的时间内,元素会完成动画,然后出发回调函数
同时也提供了时间的快速定义,字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时
slideToggle("fast")
slideToggle("slow")
注意:
- display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值
- 当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局
前端基础-jQuery的动画效果的更多相关文章
- 第一百七十二节,jQuery,动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
- jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
- 前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画 方式一: $("div" ...
- 前端基础-jQuery的优点以及用法
一.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...
- 前端基础-jQuery的内容之选择器
阅读目录 ID选择器 类选择器 元素选择器 通配符选择器 层级选择器 基本筛选器 内容筛选器 可见性筛选器 属性筛选器 子元素筛选器 表单元素筛选器 表单对象筛选器 this和$(this) 一.jQ ...
- 前端基础----jquery
一.jQuery是什么? <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2>jQuery是继 ...
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
随机推荐
- Protocol Buffer学习笔记
Protocol Buffer Protobuf基础概念 Protobuf是google开发的数据结构描述语言,能够将结构化数据序列化与反序列化,取代json和xml,常用于服务器通信协议.RPC系统 ...
- Ddos 反射性防护 simple
加固NTP服务: 1.通过Iptables配置只允许信任的IP,访问本机的UDP的123端口,修改配置文件执行echo "disable monitor" >> /et ...
- python基础——操作系统简介
不同应用领域的主流操作系统 l 桌面操作系统 l 服务器操作系统 l 嵌入式操作系统 l 移动设备操作系统 桌面操作系统 Windows系列 用户群体很大 MacOS 适合于开发人员 Linu ...
- centos编译安装php7
环境说明 VMware 12 中搭建的CentOS 7 x64 4核 2G内存 环境中已经安装了http://blog.csdn.net/u014595668/article/details/5016 ...
- git使用教程2-更新github上代码
前面一篇已经实现首次上传代码到github了,迈出了装逼第一步,本篇继续讲如何把本地更新的代码同步更新到github上 一.clone代码 1.把大神的代码clone到本地,或者clone自己gith ...
- 沉淀再出发:用python画各种图表
沉淀再出发:用python画各种图表 一.前言 最近需要用python来做一些统计和画图,因此做一些笔记. 二.python画各种图表 2.1.使用turtle来画图 import turtle as ...
- Asp.Net MVC Identity 2.2.1 使用技巧(五)
创建用户管理相关视图 1.添加视图 打开UsersAdminController.cs 将鼠标移动到public ActionResult Index()上 右键>添加视图 系统会弹出 ...
- ZT 匿名内存映射
mmap函数使用 分类: Linux/Unix C/C++ 2008-01-22 17:03 6089人阅读 评论(1) 收藏 举报 unix编程null网络 UNIX网络编程第二卷进程间通信对mma ...
- scala简介
1.什么是Scala scala官方网址: http://www.scala-lang.org Scala是一种多范式的编程语言,其设计的初衷是要集成面向对象编程和函数式编程的各种特性.Scala运行 ...
- Python的优雅写法
枚举 之前我们这样操作: Python 1 2 3 4 i = 0 for item in iterable: print i, item i += 1 现在我 ...