jQuery有下面这些常用的动画，我们下面一个一个来看一下

我先介绍几个参数，下面的方法中基本都会用到

speed 速度，可以是slow,normal或fast，或者直接使用毫秒数值比如1000
easing 速度曲线，默认是swing(先快后慢)，可以使用其他的曲线比如linear
fn 回调函数，动画播放完毕后执行

下面方法中如果将参数名以中括号括起来就代表这个参数是可选参数，可以省去，如果不给speed这种变量赋值给参数的话，必须按顺序给

1 显示隐藏

1.1 显示 show()

1.2 隐藏 hide()

1.3 切换 toggle()

2 滑动

2.1 上滑 slideUp()

2.2 下滑 slideDown()

2.3 切换 slideToggle()

2.4 之前的下拉菜单案例

3 停止动画排队stop()

4 淡入淡出

4.1 淡入 fadeIn()

4.2 淡出 fadeOut()

4.3 切换 fadeToggle()

4.4 淡到指定程度 fadeTo()

4.5 聚光灯案例

5 自定义动画 animate()

6 手风琴效果

7 折叠卡片效果

1 显示隐藏

1.1 显示 show()

语法是这样的

我们简单用一下

如果speed要用fast这种要使用fast的字符串形式

打开页面后元素会从自身的左上角点不断变大，直到变成指定大小后执行回调函数

1.2 隐藏 hide()

1.3 切换 toggle()

经测试可以以动画形式把没有变成有，把有变成没有

2 滑动

2.1 上滑 slideUp()

上滑是从有变没的过程

2.2 下滑 slideDown()

下滑是从没变有的过程

2.3 切换 slideToggle()

2.4 之前的下拉菜单案例

我们把之前的show()改为slideDown()，把之前的hide()改为slideUp()就可以有滑动的效果了

在jQuery中，鼠标经过和鼠标离开可以使用一个事件hover，第一个参数是鼠标经过触发的函数，第二个参数是鼠标离开触发的函数

使用hover可以写成这样

经测试效果相同

如果你只写一个函数那么鼠标进入和鼠标离开都会触发同一个函数，所以我们还可以简化成这样

经测试效果相同

3 停止动画排队stop()

在默认情况下，我们搞了一个动画，这个动画一定要做完。以上面的下拉菜单为例，如果我们让鼠标不停在三个链接移动，我们会看到动画在不停的播放，即使你鼠标已经离开链接很久，动画还是会播放

没做完的动画会排成一个队列，依次执行。我们可以使用stop()停止当前正在播放的动画，然后执行新的动画

stop()必须写道新增动画的前面，否则会连新增动画一起停止

这样就不会出现动画排队的问题了

4 淡入淡出

4.1 淡入 fadeIn()

4.2 淡出 fadeOut()

4.3 切换 fadeToggle()

4.4 淡到指定程度 fadeTo()

多了一个必选参数opacity,opacity的取值范围在0-1之间

4.5 聚光灯案例

效果是这样的，有六张图

当鼠标移动到某一张图像的时候，会凸显出某一张图像

思路就是把背景弄黑，当鼠标停留在一张图像时，将其兄弟元素全部变为透明状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: black;}div {display: flex;flex-wrap: wrap;width:600px;height:400px;margin:100px auto;}img {width:33%;height:50%;}</style>
</head>
<body><div><img src="upload/CSS3.png" alt=""><img src="upload/JavaScript.png" alt=""><img src="upload/jquery.jpg" alt=""><img src="upload/opencv.png" alt=""><img src="upload/pyqt5.png" alt=""><img src="upload/python.png" alt=""></div>
</body>
<script src="../../jquery-3.6.1.min.js"></script>
<script>imgs = $('div img')imgs.hover(function() {$(this).siblings().stop().fadeTo('fast',0.3)},function() {imgs.stop().fadeTo('fast',1)})
</script>
</html>

5 自定义动画 animate()

只有元素才能使用animate，直接给文档对象$(document)是会报错的

params必须以键值对的方式传入，键值对的内容是做完动画的最终状态，比如我有一个盒子，按下按钮后，想其变得不透明

animate()只能搞定值是数值的属性，比如width:100,left:200这些。它搞不定backgroundColor:red这种

如果要用两个单词的属性要用驼峰命名法

6 手风琴效果

鼠标经过哪个图片，哪个图片就会做动画变宽

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {display: flex;width:800px;height:100px;margin:100px auto;}div img {width:100px;height: 100%;}</style>
</head>
<body><div><img src="upload/CSS3.png" alt="" style="width:300px;"><img src="upload/JavaScript.png" alt=""><img src="upload/jquery.jpg" alt=""><img src="upload/opencv.png" alt=""><img src="upload/pyqt5.png" alt=""><img src="upload/python.png" alt=""></div>
</body>
<script src="../../jquery-3.6.1.min.js"></script>
<script>imgs = $('div img')imgs.mouseover(function() {$(this).siblings().stop().animate({width:100})$(this).stop().animate({width:300})})
</script>
</html>

7 折叠卡片效果

折叠卡片是手风琴效果的进阶版，有缩略图与展开图两张图像

鼠标经过某一个缩略图时

改变当前链接宽度(变大)，并淡出缩略图，淡入展开图
改变其他链接宽度(变小)，并淡出展开图，淡入缩略图

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {display: flex;width:824px;height:100px;margin:150px auto;}div a {position: relative;width:100px;height:100%;}img {position: absolute;width:100%;height:100%;}div a img:nth-child(1) {display: none;}div a:nth-child(1) {width: 224px;}div a:nth-child(1) img:nth-child(1) {display: block;}div a:nth-child(1) img:nth-child(2) {display: none;}</style>
</head>
<body><div><a href="#"><img src="data:images/c.png" alt=""><img src="data:images/c1.jpg" alt=""></a><a href="#"><img src="data:images/h.png" alt=""><img src="data:images/h1.jpg" alt=""></a><a href="#"><img src="data:images/l.png" alt=""><img src="data:images/l1.jpg" alt=""></a><a href="#"><img src="data:images/m.png" alt=""><img src="data:images/m1.jpg" alt=""></a><a href="#"><img src="data:images/t.png" alt=""><img src="data:images/t1.jpg" alt=""></a><a href="#"><img src="data:images/w.png" alt=""><img src="data:images/w1.jpg" alt=""></a><a href="#"><img src="data:images/z.png" alt=""><img src="data:images/z1.jpg" alt=""></a></div>
</body>
<script src="../../jquery-3.6.1.min.js"></script>
<script>all_a = $('div a')all_a.mouseover(function() {$(this).siblings().stop().animate({width:100},200)$(this).siblings().children('img:odd').stop().fadeIn(200)$(this).siblings().children('img:even').stop().fadeOut(200)$(this).stop().animate({width:224},200)$(this).children('img:odd').stop().fadeOut(200)$(this).children('img:even').stop().fadeIn(200)})
</script>
</html>

5.jQuery动画相关推荐

js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了.现 ...
从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
JQuery-学习笔记05【高级——JQuery动画和遍历】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
jQuery 动画效果
1.基本效果 (1)隐藏 hide() hide(speed [,callback]) (2)显示 show() show(speed [,callback]) (3)交替显示隐藏 toggle() ...
jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画
目前 jQuery 兼容于所有主流浏览器, 包括 IE 6!开发时常用 jquery.js,上线用 jquery.min.js. jq插件目前jQuery有三个大版本: (1)1.x.x: 兼容ie ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些一.总结一句话总结: 二.jquery动画函数有哪些原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
[原创]jQuery动画弹出窗体支持多种展现方式
今天刚写的利用jQuery动画弹出窗体,支持了string.Ajax.iframe.controls四种展现方式,具体细节下面慢慢介绍,先看效果图. 动画效果从哪个对象上触发的即从该对象开始逐渐向屏 ...
jquery动画切换引擎插件 Velocity.js 学习01
一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...

5.jQuery动画

1 显示隐藏

1.1 显示 show()

1.2 隐藏 hide()

1.3 切换 toggle()

2 滑动

2.1 上滑 slideUp()

2.2 下滑 slideDown()

2.3 切换 slideToggle()

2.4 之前的下拉菜单案例

3 停止动画排队stop()

4 淡入淡出

4.1 淡入 fadeIn()

4.2 淡出 fadeOut()

4.3 切换 fadeToggle()

4.4 淡到指定程度 fadeTo()

4.5 聚光灯案例

5 自定义动画 animate()

6 手风琴效果

7 折叠卡片效果

5.jQuery动画相关推荐

最新文章

热门文章