JQuery学习笔记之自定义动画效果

最新推荐文章于 2023-08-10 16:36:12 发布

秋忆夏伤

最新推荐文章于 2023-08-10 16:36:12 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/qq_29331365/article/details/52525736

版权

html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>
</head>
<body>
    <button id="b1">开始动画</button><br/>
    <button id="b2">结束动画</button>

    <div style="background-color: aqua; width: 100px; height: 100px">

    </div>
</body>
</html>

JQuery代码：

// animate()： 该方法执行 CSS 属性集的自定义动画。
// 该方法通过 CSS 样式将元素从一个状态改变成另一个状态。当CSS属性值逐渐改变时，就会产生动画效果。
// 只有数字值才可以创建动画，比如 “margin：30px”；
// 字符串值无法创建动画，比如 “background-color：red”；
// css样式使用 DOM 名称，如“fontsize”来设置；而非CSS名称(如“font-size”)；

$(document).ready(function () {
    $("#b1").click(function () {
        $("div").animate({ height: 300 }, 2000);        // 动画队列1；
        $("div").animate({ width: 300 }, 2000);         // 动画队列2；

        $("div").queue(function () {
            $("div").css("background-color", "green");  // queue():添加一个方法到动画队列；
            // dequeue():执行新添加的方法，如果没有该方法，则新添加的方法不执行。后面的动画队列也全部停止。
            $("div").dequeue();
        });

        $("div").animate({ height: 100 }, 2000);        // 动画队列3；
        $("div").animate({ width: 100 }, 2000);         // 动画队列4；
    });

    $("#b2").click(function () {
        //$("div").stop();                // 只停止当前动画队列。其他的动画队列还是会继续执行；
        //$("div").stop(true);            // 停止当前动画队列中的所有动画；
        $("div").stop(true, true);      // 会立刻执行完当前动画，然后停止后面所有的动画队列；
    });
});