jQuery动画

最新推荐文章于 2022-12-22 17:52:21 发布
最新推荐文章于 2022-12-22 17:52:21 发布
阅读量158 收藏
点赞数
分类专栏： 基础 web 文章标签： JQ
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38636998/article/details/83411801
版权
基础 同时被 2 个专栏收录
54 篇文章 0 订阅
订阅专栏
web
34 篇文章 0 订阅
订阅专栏

jQuery动画

一 、概述

jQuery提供了一组方法用于为HTML元素制作简单的动画效果。这些动画的方法都是根据实际动画效果来命名的，它们分别是：

show(),hide(),toggle(),slideDown(),slideUp(),slideToggle(),fadeIn(),fadeOut(),fadeToggle(),fadeTo(),animate()

二 、show() hide()

1、作用

方法用于显示隐藏的元素。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

2、语法

​ $(“selector”).show([speed,[easing],[fn]])

3、参数：

  1. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  2. easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
  3. fn：在动画完成时执行的函数，每个元素执行一次。

4、示例代码

  1. 示例一

    $('#img').show();   
注:在对元素使用show()方法之前，该元素必须是处于隐藏状态，否则不会有任何效果。要隐藏一个元素可以通过hide()方法或通过CSS样式。
<img id="img" style="display: none" src="..." />

  2. 示例二

    show()方法的第一个参数是显示元素的动画速度，可以是三个预置的字符串或一个整数数值。
$('#img').show('slow');
$('#img').show('normal');
$('#img').show('fast');
$('#img').show(2000);

  3. 示例三

    第3个参数是一个可选的回调函数，它在元素被完全显示后执行。
$('#img').show(function(){ alert('shown');} );
$('#img').show(2000, function(){ alert('shown');} );                            
hide()
hide()方法用于隐藏元素。如果选择的元素是隐藏的，这个方法将不会改变任何东西。
hide()方法的语法为：
hide([speed,[easing],[fn]])                          
参数：
speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
fn：在动画完成时执行的函数，每个元素执行一次。
例如下面的代码隐藏div元素。
$('#img').hide();
$('#img').hide('slow');
$('#img').hide('normal');
$('#img').hide('fast');
$('#img').hide(2000);                            
也可以在元素被完全隐藏之后执行一个回调函数。
$('#img').hide(function(){ alert('shown');} );
$('#img').hide(2000, function(){ alert('shown');} );

三、toggle()

1、作用

切换一个元素的可见性。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

2、语法

​ toggle([speed],[easing],[fn])

3、参数

  1. speed： 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。
  2. easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
  3. fn：在动画完成时执行的函数，每个元素执行一次。

4、示例代码

  1. 示例一

    $('#div').toggle();
$('#div').toggle('slow');
$('#div').toggle('normal');
$('#div').toggle('fast');
$('#div').toggle(2000);

  2. 示例二

    也可以在元素的状态被切换之后执行一个回调函数。
$('#div').toggle(function(){ alert('shown');} );
$('#div').toggle(2000, function(){ alert('shown');} );

四、slideDown()

1、作用

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

2、语法

​ slideDown([speed],[easing],[fn])

3、参数

  1. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  2. easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
  3. fn：在动画完成时执行的函数，每个元素执行一次。

4、示例代码

  1. div元素向下滑动显示

    $('#div').slideDown();
$('#div').slideDown('slow');
$('#div').slideDown('normal');
$('#div').slideDown('fast');
$('#div').slideDown(2000);

  2. 元素向下滑动显示完成之后执行一个回调函数

    $('#div').slideDown(function(){ alert('done');} );
$('#div').slideDown(2000, function(){ alert('done');} );

五、slideUp()

1、作用

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

2、语法

​ slideUp([speed],[easing],[fn])

3、参数

  1. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  2. easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
  3. fn：在动画完成时执行的函数，每个元素执行一次。

4 示例代码

  1. 向上滑动显示。

    $('#div').slideUp();
$('#div').slideUp('slow');
$('#div').slideUp('normal');
$('#div').slideUp('fast');
$('#div').slideUp(2000);

  2. 向上滑动显示完成之后执行一个回调函数

    $('#div').slideUp(function(){ alert('done');} );
$('#div').slideUp(2000, function(){ alert('done');} );

六、slideToggle()

1、作用

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

2、语法

​ slideToggle(speed [,easing ,fn])

3、参数

  1. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  2. easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
  3. fn：在动画完成时执行的函数，每个元素执行一次。

4、示例代码

  1. 滑动的发生切换div元素的可见性

    $('#div').slideToggle();
$('#div').slideToggle('slow');
$('#div').slideToggle('normal');
$('#div').slideToggle('fast');
$('#div').slideToggle(2000);

  2. 元素向上滑动显示完成之后执行一个回调函数

    $('#theDiv').slideToggle(function(){ alert('done');} );
$('#theDiv').slideToggle(2000, function(){ alert('done');} );

    ​

    ​

七、fadeIn()

1、作用

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

2、语法

​ fadeIn([speed],[easing],[fn])

3、参数

  1. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  2. easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
  3. fn：在动画完成时执行的函数，每个元素执行一次。

4、示例代码

  1. 淡入的方式显示div元素

    $('#div').fadeIn();
$('#div').fadeIn('slow');
$('#div').fadeIn('normal');
$('#div').fadeIn('fast');
$('#div').fadeIn(2000);

  2. 元素淡入显示完成之后执行一个回调函数

    $('#theDiv').fadeIn(function(){ alert('done');} );
$('#theDiv').fadeIn(2000, function(){ alert('done');} );

八、fadeOut()

1、作用

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

2、语法

fadeOut([speed],[easing],[fn])

3、参数

  1. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  2. easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
  3. fn：在动画完成时执行的函数，每个元素执行一次。

4、参数

  1. 以淡出的方式隐藏div元素。

    $('#div').fadeOut();
$('#div').fadeOut('slow');
$('#div').fadeOut('normal');
$('#div').fadeOut('fast');
$('#div').fadeOut(2000);

  2. 淡出隐藏完成之后执行一个回调函数。

    $('#div').fadeOut(function(){ alert('done');} );
$('#div').fadeOut(2000, function(){ alert('done');} );

九、fadeToggle()

1、作用

fadeToggle()方法通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

2、语法

​ fadeToggle([speed],[easing],[fn])

3、参数

  1. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  2. easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
  3. fn：在动画完成时执行的函数，每个元素执行一次。

4、示例代码

  1. 以淡入淡出的方式显示和隐藏div元素

    $('#div').fadeToggle();
$('#div').fadeToggle('slow');
$('#div').fadeToggle('normal');
$('#div').fadeToggle('fast');
$('#div').fadeToggle(2000);

  2. 元素淡入淡出显示和隐藏完成之后执行一个回调函数

    $('#div').fadeToggle(function(){ alert('done');} );
$('#div').fadeToggle(2000, function(){ alert('done');} );

十、 fadeTo()

1、作用

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

2、语法

​ fadeTo([[speed],opacity,[easing],[fn]])

3、参数

  1. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  2. opacity：一个0至1之间表示透明度的数字。
  3. easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
  4. fn：在动画完成时执行的函数，每个元素执行一次。

4、示例代码

  1. 以动画的方式将div元素的透明度设置为0.5

    $('#div').fadeTo(0.5);
$('#div').fadeTo('slow', 0.5);
$('#div').fadeTo('normal', 0.5);
$('#div').fadeTo('fast', 0.5);
$('#div').fadeTo(2000, 0.5);

  2. 元素透明动画完成之后执行一个回调函数

    $('#div').fadeTo(0.5, function(){ alert('done');} );
$('#div').fadeTo(2000, 0.5, function(){ alert('done');} );

十一、animate()

1、作用

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。 不是所有的属性都可以被动画，下面列出了一些可以被动画的属性。 borderWidth,width,height,fontSize,opacity,margin,padding,bottom,left,right,top,wordSpacing

2、语法

animate(params,[speed],[easing],[fn])

3、参数

  1. params：一组包含作为动画属性和终值的样式属性和及其值的集合。
  2. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  3. easing：要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”。
  4. fn：在动画完成时执行的函数，每个元素执行一次。
零zero度
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery动画背景图片
06-10
在这个例子中，我们将使用js调用图片作为网页背景图片。当然不仅仅是简单的静态图片，还可以让图片从左向右滚动起来，实现图片动画效果。例如让云彩从左向右飘动起来的效果
jQuery动画效果
m0_51435825的博客
12-13 701
jQuery动画效果
Educoder jQuery动画
m0_65391975的博客
12-05 588
Educoder jQuery动画 第1关：jQuery动画效果——隐藏/显示 第2关：jQuery动画效果——淡入淡出 第3关：jQuery动画效果——滑动 第4关：jQuery动画效果——自定义动画
jQuery 动画效果
qq_49900295的博客
04-01 2496
目录 1.常见的动画效果 2.显示隐藏效果 显示语法规范： 显示参数： 隐藏语法规范： 隐藏参数： 3.滑动效果 停止排队： 4.自定义动画animate 参数： 小案例 1.常见的动画效果 jQuery给我们封装了很多动画效果,最为常见的如下: 显示隐藏 show() hide() toggle() 滑动 slideDown() slideUp() slideToggle() 淡入淡出 fadeIn() fadeOu...
jQuery 动画
xiangxiongfly
12-22 1238
显示和隐藏动画 show() 和 hide() toggle() 淡入和淡出动画 fadeIn() 和 fadeOut() fadeToggle() fadeTo() 滑上和滑下动画 slideUp()和slideDown() slideToggle() 自定义动画 简单动画 jquery.color.js 累积动画 回调函数 队列动画 取消动画 延迟动画 判断动画状态
jQuery动画（jQuery预制动画，jQuery自定义动画，jQuery停止动画和延迟动画）
weixin_64037609的博客
09-21 581
jQuery动画（jQuery预制动画，jQuery自定义动画，jQuery停止动画和延迟动画）
jQuery动画特效
m0_51281306的博客
03-24 1973
1.1基本动画 hide():隐藏HTML元素 show():显示HTML元素 toggle():show()和Hide()的切换。 语法 $(selector).show(speed,easing,callback) speed 可选。规定显示效果的速度。 可能的值：毫秒 "slow" "fast" easing 可选。规定在动画的不同点上元素的速度。 默认值为 "swing"。 可能的值： "swing" - 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动 c
jQuery动画详解
星河梦~的博客
07-29 868
目录jQuery动画显示与隐藏收缩与展开淡入淡出停止动画 jQuery动画 利用jQuery也是可以实现一些简单的动画效果的哦，下面来看看jQuery可以实现哪些效果吧。 显示与隐藏 方法： 例如： <button id="a">显示</button> <button id="b">隐藏</button> <button id="c">交替</button> $(function(){ $('#a').click(functi
JQuery 动画和事件
m0_65725031的博客
03-22 1586
今天是JQuery的第四节课啦，今天主要讲JQuery的动画和事件,大家有不懂的在下方评论或者私信，也希望和小编一样在长沙的家人们，做好防疫措施，出门带好口罩，能不出门尽量不出门，不给国家添麻烦。好啦我们要开始今天的课程啦，大家有不懂的在下方评论或者私信小编噢，看到一定会回复的。 目录 一.事件 1.window.onload():窗口加载事件 2. on("事件",function (){})：绑定事件 3.hover() : 鼠标悬停合成事件 4.toggle（）：...
Educoder/头歌JAVA——jQuery动画
舟舟的博客
12-12 3646
动画是使元素实现从一种样式逐渐变化为另一种样式的效果。jQuery动画包括隐藏/显示，淡入/淡出，上滑/下滑，自定义动画等效果。 本实训的主要内容是jQuery动画，从动画效果的方法到自定义动画，可以创建自己想要的动画效果。
jQuery 动画基础教程
12-10
注意此代码需要用到jquery的js文件，才可以用所以大家可以先下载一个jquery文件，注意调用路径。代码： 代码如下:<...jQuery动画基础</title> <script type=”text/javascript” src=”..
jQuery动画垂直时间轴特效特效代码
03-20
jQuery动画垂直时间轴特效代码是一款带有动画效果慢慢显示出来的jQuery时间轴特效。
jQuery动画登录注册表单切换特效代码
03-20
jQuery动画登录注册表单切换代码是一款基于jQuery+CSS3实现的简洁登陆和注册页面表单代码。
jquery动画切换排序点击放大切换特效代码
03-20
jquery动画切换排序点击放大切换是一款jquery相册代码，画廊效果。
python面向对象练习题
qq_38636998的博客
09-25 8030
‘’’ 1.封装一个学生类，有姓名，有年龄，有性别，有英语成绩，数学成绩，语文成绩， 封装方法，求总分，平均分，以及打印学生的信息。 ‘’’ ‘’’ 对象：学生 类：学生（student） 属性：姓名（name） 年龄（age） 性别（gender） 英语成绩（English—achievements） 数学成绩（mathematics） 语文成绩（chinese-achievement-test...
最详细的虚拟机linux安装教程
qq_38636998的博客
10-30 7647
Linux安装 一、概要 介绍 Linux的安装、常用命令、远程访问等入门级知识。学完本课程，具备初级软件工程师对Linux知识的要求。 Linux 学习过程: 首先在 Windows下安装虚拟机管理软件VMWare Workstation Pro 14 或者VirtualBox 5。 然后使用VMWare 创建虚拟机。 接着，在创建好的虚拟机上安装Ubuntu 64 位 Li...
python os模块
qq_38636998的博客
09-29 3181
本篇详细讲解python os模块的使用以及功能 import os #导入os模块 #print(os.name) #查看操作系统 nt—windows #posix—linux/unis/mac os #print(os.uname()) #打印电脑详细信息 #不支持windows #print(os.environ) #获取操作系统的所有环境变量 #print(os.environ.get(...
html 函数
qq_38636998的博客
10-25 3147
函数(function) 一、概要 函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其...
jquery动画
最新发布
02-11
jQuery动画可以用来创建各种动画效果，例如淡入、淡出、移动、放大缩小等。 jQuery动画通过使用 animate() 方法来实现。 例如，要在500毫秒内将div元素的高度从100像素增加到200像素，可以使用以下代码： ``` $(...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值