jQuery动画知识总结
jQuery动画概述
我们之前实现的下拉菜单的案例,是没有动画效果的,但是在日常开发中,动画效果是经常会用到的,所以我们可以尝试使用jQuery动画,将下拉菜单案例实现的更动感一些。
jQuery提供了三组动画,这些动画都是标准的、有规律的效果,同时jQuery还提供了自定义动画的功能。
显示与隐藏
显示(show)与隐藏(hide)是一组动画:
show方法详解
show([speed], [callback]);
/*
speed(可选):动画的执行时间
1.如果不传,就没有动画效果。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。
callback(可选):执行完动画后执行的回调函数
*/
hide方法详解
与show方法的用法完全一致。
hide([speed], [callback]);
/*
speed(可选):动画的执行时间
1.如果不传,就没有动画效果。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。
callback(可选):执行完动画后执行的回调函数
*/
toggle方法详解
toggle()方法可以用来切换元素的可见状态。
参数和show/hide方法基本一致
Toggle(speed, callback);
//如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
注意:show/hide:修改的是元素的width、height、opacity。
滑入与滑出
滑入slideUp与滑出slideDown是一组动画,效果与卷帘门类似。
slideUp/slideDown,使用方法与show/hide基本一致。
slideUp方法详解
slideUp(speed, callback);
/*
speed(可选):动画的执行时间
1.如果不传,默认为normal,注意和show/hide的区别。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,slow(200)、normal(400)、fast(600)
callback(可选):执行完动画后执行的回调函数
*/
slideDown方法详解
slideDown(speed, callback);
/*
speed(可选):动画的执行时间
1.如果不传,默认为normal,注意和show/hide的区别。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,slow(200)、normal(400)、fast(600)
callback(可选):执行完动画后执行的回调函数
*/
滑入滑出切换
$(selector).slideToggle(speed,callback);
//如果是隐藏状态,那么执行slideDown操作,如果是显示状态,那么执行slideUp操作。
注意:slideUp/slideDown:修改的是元素的height
淡入与淡出
fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。
fadeIn详解
fadeIn(speed, callback);
/*
speed(可选):动画的执行时间
1.如果不传,默认是normal。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,slow(200)、normal(400)、fast(600)
callback(可选):执行完动画后执行的回调函数
*/
fadeOut详解
fadeOut(speed, callback);
/*
speed(可选):动画的执行时间
1.如果不传,默认是normal。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,slow(200)、normal(400)、fast(600)
callback(可选):执行完动画后执行的回调函数
*/
淡入淡出切换:
fadeToggle(speed, callback);
//如果当前元素处于隐藏状态,那么执行fadeIn操作,如果处于显示状态,那么执行fadeOut操作。
淡入淡出到某个值
与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明; 而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的!
fadeTo(speed, value, callback)
//可以设置具体的透明度
//speed(必须)
//value 0-1之间的数值(比如0.4),表示淡到某一个值。
//callback(可选) 回调函数
注意: fade系列方法:修改的是元素的opacity
三组动画小结
- jQuery给我们提供了三组动画:
show/hideslideUp/slideDownfadeIn/fadeOut
- 动画切换方法:淡入淡出到某个值:
fadeTo方法。toggleslideTogglefadeToggle
show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。- 这三种方法修改的这些值,都是带数字的,因为带了数字才能做渐变。
show/hide修改的是元素的height,width,opacityslide系列方法修改的是元素的heightfade系列方法修改的是元素的opacity
jQuery动画知识总结的更多相关文章
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- JQuery基础知识(2)
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- 【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
- js进阶 13-1 jquery动画中的显示隐藏函数有哪些
js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...
- jQuery动画的实现
没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- 深入学习jQuery动画队列
前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...
- jquery动画,基础以及我发现的新大陆
$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
随机推荐
- C#--条形码和二维码的简单实现
首先 简单的介绍一下条形码和二维码 条形码: 条形码技术是在计算机应用中产生发展起来的一种广泛应用于商业.邮政.图书管理.仓储.工业生产过程控制.交通运输.包装.配送等领域的自动识别技术.它最早出现在 ...
- python笔记之json报错
写爬虫的过程中不免遇到处理json数据的情况,今天在爬取新华网新闻数据时发现使用json.loads函数时报错: json.decoder.JSONDecodeError: Expecting val ...
- 【Codeforces 91B】Queue
[链接] 我是链接,点我呀:) [题意] [题解] 对于每个i,用二分的方法求出来y所在的位置j. 可以这样求. 假设现在二分到了位置mid. 那么随便用个rmq求出来mid..n这一段的最小值tem ...
- springcloud 中文文档
spring cloud 中文文档:https://springcloud.cc/spring-cloud-dalston.html spring cloud 中文网:https://springcl ...
- C语言——定义&&声明
1.变量的定义&声明 变量的声明有两种情况: <1>一种是需要建立存储空间的.例如:int a 在声明的时候就已经建立了存储空间. <2>另一种是不需要建立存储空间的. ...
- C - A Simple Problem with Integers
C - A Simple Problem with Integers POJ - 3468 思路:线段树区间修改区间查询.又出现了 C++ WA G++ AC的尴尬局面. #include& ...
- 洛谷 P1948 [USACO08JAN]电话线Telephone Lines
P1948 [USACO08JAN]电话线Telephone Lines 题目描述 Farmer John wants to set up a telephone line at his farm. ...
- 部署WAR包实时查看Tomcat的状态和日志
在不重启Tomcat的情况下部署WAR包实时输出日志的方法: 注意:以下方式只适合Linux. 一.定位错误 查看Tomcat日志的尾部 tail -n 50 /opt/tomcat8/logs/ca ...
- geos库交叉编译生成ARM平台库
版本号信息: GEOS:geos-3.4.2.tar.bz2(http://trac.osgeo.org/geos/) CPU:ARM 编译器:arm-linux 4.2.2 1. 解压源代码包ge ...
- 链表快排 & 基于链表的排序
以前只知道链表做插入(朴素.非二分)排序挺方便的.现在知道了(单)链表进行快速排序也是很好的(只是跟一般的快排的方式不一样). 参考: http://blog.csdn.net/otuhacker/a ...