js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些
一、总结
一句话总结:
二、jquery动画函数有哪些
原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性。通过jQuery,我们使用简单几句代码,即可轻松实现各种动画效果。
之前我们讲过使用CSS3实现动画,它比使用jQuery实现动画效果更加简单,不过jQuery实现动画会更加的灵活,可以实现更加复杂的动画效果。
显示和隐藏
控制元素的的显示和隐藏是最基本的动画技术。
- show()显示被选的元素
语法:$(selector).show([speed,[easing],[fn]])
- hide()隐藏被选的元素
语法:$(selector).hide([speed,[easing],[fn]])
- toggle()对被选元素进行隐藏和显示的切换
语法:$(selector).toggle(speed,callback,switch
- 参数说明:
1.speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如:1000
2. easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
3. fn:在动画完成执行的函数,每个元素执行一次。
滑动
滑动效果也是比较常见的动画效果,比如我们常见的具有滑动效果的下拉菜单
- slideDown():通过调整高度来滑动显示被选元素
语法:$(selector).slideDown([speed],[easing],[fn])
- slideUp():通过调整高度来滑动隐藏被选元素
语法:$(selector),slideUp[speed,[easing],[fn]])
- slideToggle()通过高度变化来切换所有匹配元素的可见性。
语法:$(selector).slideToggle([speed],[easing],[fn])
- 参数说明:
1.speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如:1000)
2. easing:(Optional)用来指定切换效果, 默认是"swing",可用参数"linear""
3. fn:在动画完成时执行的函数,每个元素执行一次。
淡入淡出
淡入和淡出效果,本质上其实都是通过改变元素的"透明度"(opacity属性)来实现的。
- fadeIn()和fadeOut():可以使用fadeIn()方法来实现元素的淡入效果,使用fadeOut()方法来实现元素的淡出效果。
语法:fadeIn([speed],[easing],[fn])/fadeOut([speed],[easing],[fn])
- fadeToggle()通过不透明度的变化来开关所有匹配元素的淡入和淡出效果。
语法:fadeToggle([speed,[easing],[fn]])
- fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
语法:fadeTo([[speed],opacity,[easing],[fn]])
自定义动画
jQuery动画是通过将元素的某一个属性从"一个属性值"在指定时间内平滑地过渡到"另外一个属性值"来实现,原理跟CSS3动画原理是一样的。
- animate()方法执行CSS属性集的自定义动画。
语法:animate(params,[speed],[easing],[fn])
参数:params:一组包含作为动画属性和终值的样式属性和及其值的
集合注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left
- stop()方法停止当前正在运行的动画。
语法:$(selector),stop(stopA11,goToEnd)
参数:stopA11 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd可选。规定是否允许完成当前的动画。该参数只能在设置了stopA11参数时使用。
- finish()停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。
inish()方法和stop(true,true)很相似,stop(true,true)将清除队列,并且目前的动画跳转到其最终值。但是,不同的是,finish()会导致所有排队的动画的CSS属性跳转到他们的最终值。
- delat()将队列中下一个动画延迟指定的时间后执行。
- jQuery.fx.off关闭页面上所有的动画。
- jQuery.fx.interval设置动画的显示帧速。默认值为13
js进阶 13 jquery动画函数有哪些的更多相关文章
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- js进阶 13-1 jquery动画中的显示隐藏函数有哪些
js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...
- js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么
js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...
- js进阶 13-2 jquery动画滑动效果哪些注意事项
js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...
- js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
- js进阶 14 jquery的ajax有哪些函数和事件(多练)
js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...
- js进阶 13-4 jquery自定义动画animate()如何使用
js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...
- js进阶 12-14 jquery的事件触发函数是哪两个
js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
随机推荐
- rpm2cpio---如何不安装但是获取rpm包中的文件
如何不安装但是获取rpm包中的文件 使用工具rpm2cpio和cpio rpm2cpio xxx.rpm | cpio -idmv 参数i表示提取文件.v表示指示执行进程,d和make-directo ...
- 学习——HTML5中事件
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- 洛谷 P2913 [USACO08OCT]车轮旋转Wheel Rotation
P2913 [USACO08OCT]车轮旋转Wheel Rotation 题目描述 Farmer John has an old-time thresher (wheat harvester) tha ...
- C# 对Excel操作时,单元格值的读取
一.Range中Value与Value2的区别 当range("A1:B10")设置为 Currency (货币)和 Date (日期.日期时间)数据类型时,range2将返回对应 ...
- Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apache/ma ven/cli/Maven
安装maven 中出现例如以下异常: Exception in thread "main" java.lang.UnsupportedClassVersionError: org/ ...
- RvmTranslator6.5 is released
RvmTranslator6.5 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...
- HDOJ 5414 CRB and String 模拟
CRB and String Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) T ...
- 如何解决Linux下的软件包依赖问题
650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/att ...
- HDU 4678 Mine SG博弈
http://acm.hdu.edu.cn/showproblem.php?pid=4678 自己太蠢...没学SG...还是浩神指点我SG精髓以后才A的这题...(第一题SG 这里子游戏之间没有影响 ...
- 【Codeforces Round #457 (Div. 2) A】 Jamie and Alarm Snooze
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 暴力往前走x分钟就好. 直到出现7为止. [代码] #include <bits/stdc++.h> using nam ...