5.jQuery动画

Suyuoa

已于 2022-09-15 11:02:57 修改

阅读量442

点赞数

分类专栏： jQuery笔记文章标签： jquery 动画 javascript

于 2022-09-07 09:51:25 首次发布

本文链接：https://blog.csdn.net/potato123232/article/details/126739094

版权

jQuery笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

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

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

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

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="images/c.png" alt="">
            <img src="images/c1.jpg" alt="">
        </a>
        <a href="#">
            <img src="images/h.png" alt="">
            <img src="images/h1.jpg" alt="">
        </a>
        <a href="#">
            <img src="images/l.png" alt="">
            <img src="images/l1.jpg" alt="">
        </a>
        <a href="#">
            <img src="images/m.png" alt="">
            <img src="images/m1.jpg" alt="">
        </a>
        <a href="#">
            <img src="images/t.png" alt="">
            <img src="images/t1.jpg" alt="">
        </a>
        <a href="#">
            <img src="images/w.png" alt="">
            <img src="images/w1.jpg" alt="">
        </a>
        <a href="#">
            <img src="images/z.png" alt="">
            <img src="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>

Suyuoa

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
5.jQuery动画

params必须以键值对的方式传入，键值对的内容是做完动画的最终状态，比如我有一个盒子，按下按钮后，想其变得不透明animate()只能搞定值是数值的属性，比如width:100,left:200这些。它搞不定backgroundColor:red这种如果要用两个单词的属性要用驼峰命名法。
复制链接

扫一扫