jQuery学习二-动画回调和多个动画执行

最新推荐文章于 2021-07-01 09:21:55 发布

Mr丶M

最新推荐文章于 2021-07-01 09:21:55 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： jquery 动画

本文链接：https://blog.csdn.net/qq_34390576/article/details/78236155

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

上面学习了动画效果，现在学习一下动画的回调和多个动画的使用

下面用代码说明：

布局代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
   <p id="test">动画的回调</p>
    <button id="btn">回调</button>
</body>
</html>

test.js的代码

$(document).ready(function () {
    $("#btn").click(function () {
        $("#test").hide(1000.function () {
            alert("方法已经被调用");
        })
    });
})

从代码中可以知道当动画执行完成后就会执行回调方法从而弹出一弹窗。
这就是简单的动画回调。

下面说一下多个动画的执行：

布局的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <!--<link type="text/css" rel="stylesheet" href="test.css">-->
</head>
<body>
   <p id="test">多个动画</p>
    <button id="btn">动画</button>
</body>
</html>

js的代码：

$(document).ready(function () {
    $("#btn").click(function () {
      $("p").css("color","Blue").slideUp(1000).fadeTo(1000,0.5).slideDown(1000);
    });
})

从上面的代码可以看出多个动画通过”.”来进行添加的。我说一下上面的代码吧，当点击事件发生后p标签的颜色会改为蓝色（你也可以改成其它的颜色，这是不限定的），然后执行隐藏动画，再到标签的透明度变化，最后再执行显示动画。

Mr丶M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习二-动画回调和多个动画执行

上面学习了动画效果，现在学习一下动画的回调和多个动画的使用下面用代码说明：布局代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <script src="jquery-3.2.1.min.js"></script> <script src="tes
复制链接

扫一扫