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. BZOJ 1984月下“毛景树” LCT维护边权 + 下传标记

    Description 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园. 毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里.爬啊爬~爬啊爬~~毛毛虫爬到了一颗小小的“毛景树” ...

  2. IDEA中使用Database管理工具

    以下内容来自我的知乎回答IntelliJ IDEA中有什么让你相见恨晚的技巧? 说个冷门的,用IDEA操作数据库. 可能大部分不知道,IDEA是自带数据库管理工具的,类似于一个小型Navicat. 具 ...

  3. 在 CentOS 7 上设置 grub2

    在 CentOS 7 上设置 grub2 1. 开机选单是自动创建出来的 请勿尝试手动编辑开机选单,因为它是按照 /boot/ 目录内的文件自动创建出来的.然而你可以调整 /etc/default/g ...

  4. UNIX C 信号

    1.信号处理 #include <signal.h> typedef void(*sighander_t)(int); sighander_t signal(int signum,sigh ...

  5. 配置zabbix及安装agent

    一.配置zabbix http://ip/zabbix/setup.php Next step Next step 输入数据库密码后,Next step Next step 默认用户名是Admin 密 ...

  6. ldap 用户组和用户(4)

    Posixgroup用户组属性 默认情况下openldap的用户组属性是Posixgroup,Posixgroup用户组属性和用户没有实际的对应关系.如果我们一定要把Posixgroup和user对应 ...

  7. Problem 16

    Problem 16 pow(2, 15) = 32768 and the sum of its digits is 3 + 2 + 7 + 6 + 8 = 26.2的15次方等于32768,而这些数 ...

  8. (转载)关于初学者上传文件到github的方法

    说来也惭愧,我是最近开始用github,小白一个,昨天研究了一个下午.终于可以上传了,所以今天写点,一来分享是自己的一些经验,二来也是做个记录,万一哪天又不记得了:) 废话不多说,直接来,这次主要介绍 ...

  9. hdu 2444 交叉染色判断二分图+二分最大匹配

    /*1A 31ms*/ #include<stdio.h> #include<string.h> #define N 300 int n; struct node { int ...

  10. windows集成身份验证

    集成windows身份验证 这种验证方式里面也分为两种情况 NTLM验证 这种验证方式需要把用户的用户名和密码传送到服务端,服务端验证用户名和密码是否和服务器的此用户的密码一致.用户名用明码传送,但是 ...