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:修改的是元素的widthheightopacity

滑入与滑出

滑入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/hideslideDown/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

三组动画小结

  1. jQuery给我们提供了三组动画:

    • show/hide
    • slideUp/slideDown
    • fadeIn/fadeOut
  2. 动画切换方法:淡入淡出到某个值:fadeTo方法。
    • toggle
    • slideToggle
    • fadeToggle
  3. show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
  4. 这三种方法修改的这些值,都是带数字的,因为带了数字才能做渐变。
    • show/hide修改的是元素的height,width,opacity
    • slide系列方法修改的是元素的height
    • fade系列方法修改的是元素的opacity

jQuery动画知识总结的更多相关文章

  1. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  2. JQuery基础知识(2)

    JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...

  3. 【JQuery基础知识/statusCode(状态码)】---初学者必备

    今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...

  4. js进阶 13-1 jquery动画中的显示隐藏函数有哪些

    js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...

  5. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  6. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  7. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  8. jquery动画,基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  9. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

随机推荐

  1. C#--条形码和二维码的简单实现

    首先 简单的介绍一下条形码和二维码 条形码: 条形码技术是在计算机应用中产生发展起来的一种广泛应用于商业.邮政.图书管理.仓储.工业生产过程控制.交通运输.包装.配送等领域的自动识别技术.它最早出现在 ...

  2. python笔记之json报错

    写爬虫的过程中不免遇到处理json数据的情况,今天在爬取新华网新闻数据时发现使用json.loads函数时报错: json.decoder.JSONDecodeError: Expecting val ...

  3. 【Codeforces 91B】Queue

    [链接] 我是链接,点我呀:) [题意] [题解] 对于每个i,用二分的方法求出来y所在的位置j. 可以这样求. 假设现在二分到了位置mid. 那么随便用个rmq求出来mid..n这一段的最小值tem ...

  4. springcloud 中文文档

    spring cloud 中文文档:https://springcloud.cc/spring-cloud-dalston.html spring cloud 中文网:https://springcl ...

  5. C语言——定义&&声明

    1.变量的定义&声明 变量的声明有两种情况: <1>一种是需要建立存储空间的.例如:int a 在声明的时候就已经建立了存储空间. <2>另一种是不需要建立存储空间的. ...

  6. C - A Simple Problem with Integers

    C - A Simple Problem with Integers POJ - 3468   思路:线段树区间修改区间查询.又出现了 C++ WA    G++ AC的尴尬局面. #include& ...

  7. 洛谷 P1948 [USACO08JAN]电话线Telephone Lines

    P1948 [USACO08JAN]电话线Telephone Lines 题目描述 Farmer John wants to set up a telephone line at his farm. ...

  8. 部署WAR包实时查看Tomcat的状态和日志

    在不重启Tomcat的情况下部署WAR包实时输出日志的方法: 注意:以下方式只适合Linux. 一.定位错误 查看Tomcat日志的尾部 tail -n 50 /opt/tomcat8/logs/ca ...

  9. geos库交叉编译生成ARM平台库

    版本号信息: GEOS:geos-3.4.2.tar.bz2(http://trac.osgeo.org/geos/) CPU:ARM 编译器:arm-linux 4.2.2 1.  解压源代码包ge ...

  10. 链表快排 & 基于链表的排序

    以前只知道链表做插入(朴素.非二分)排序挺方便的.现在知道了(单)链表进行快速排序也是很好的(只是跟一般的快排的方式不一样). 参考: http://blog.csdn.net/otuhacker/a ...