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

来源：互联网发布：基于大数据用户画像编辑：程序博客网时间：2024/05/21 10:49

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

下面用代码说明：

布局代码：

<!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标签的颜色会改为蓝色（你也可以改成其它的颜色，这是不限定的），然后执行隐藏动画，再到标签的透明度变化，最后再执行显示动画。

阅读全文

0 0