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
/hide
slideUp
/slideDown
fadeIn
/fadeOut
- 动画切换方法:淡入淡出到某个值:
fadeTo
方法。toggle
slideToggle
fadeToggle
show
/slideDown
/fadeIn
三个是显示效果、hide
/slideUp
/fadeOut
三个是隐藏效果。- 这三种方法修改的这些值,都是带数字的,因为带了数字才能做渐变。
show
/hide
修改的是元素的height
,width
,opacity
slide
系列方法修改的是元素的height
fade
系列方法修改的是元素的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 ...
随机推荐
- python 处理中文 读取数据库输出全是问号
ref:http://www.cnblogs.com/zhoujie/archive/2013/06/07/problem1.html 1.python连接mssql数据库编码问题 python一直对 ...
- CDR中国元素圆形花纹矢量图制作流程
在论坛中看到这样一个问题,想要使用CorelDRAW矢量绘图工具做出下图所示的中国元素圆形花纹矢量图,小编潜心研究一下,最终有了绘制方法,今天给大家分享下. 步骤一:画同心圆,先画出10个,这个是根据 ...
- CF319E Ping-Pong 线段树 + vector + 思维
Code: #include<bits/stdc++.h> #define N 3000009 #define maxn 3000009 #define ll long long #def ...
- BZOJ 1572: [Usaco2009 Open]工作安排Job 贪心 + 堆 + 反悔
Description Farmer John想修理牧场栅栏的某些小段.为此,他需要N(1<=N<=20,000)块特定长度的木板,第i块木板的长度为Li(1<=Li<=50, ...
- 【剑指Offer】28、数组中出现次数超过一半的数字
题目描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字. 例如:输入如下所示的一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过 ...
- [Ynoi2016]镜中的昆虫
题目大意: 给定一个序列,有2个操作: 1. 区间覆盖.2. 区间数颜色. 解题思路: 珂朵莉树+树套树. 看到区间覆盖当然想到珂朵莉树然而这是Ynoi 所以我们得优化掉珂朵莉树那个暴力过程. 考虑对 ...
- JDK源码阅读-Integer
先上一版字符串转数值的几个方法的区别 parseInt(String s),解析字符串数,10进制,返回int parseInt(String s, int radix),解析字符串数,radix为指 ...
- SpringBoot+FreeMarker开发word文档下载,预览
背景: 开发一个根据模版,自动填充用户数据并下载word文档的功能 使用freemarker进行定义模版,然后把数据进行填充. maven依赖: <parent> <groupId& ...
- Mycat分表分库
一.Mycat介绍 Mycat 是一个开源的分布式数据库系统,是一个实现了 MySQL 协议的的Server,前端用户可以把它看作是一个数据库代理,用 MySQL 客户端工具和命令行访问,而其后端可以 ...
- CSS3 timing-function: steps()介绍
在应用 CSS3 渐变/动画时.有个控制时间的属性 <timing-function>.它的取值中除了经常使用到的三次贝塞尔曲线以外,还有个steps() 函数. steps 函数指定了一 ...