发表于: 2020-03-06 23:51:27

1 1499


今天完成的事情:今天学习了jQ的动画以及停止动画的方法以及Callback 方法
明天计划的事情:继续学习jQ的后续内容
遇到的问题:内容较多实际用起来不太熟练需要更多地的练习
收获:今天学习了animate()  使用预定义的值

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({
                    height: 'toggle'
                });
            });
        });
    </script>
</head>

<body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
        如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>

</body>

</html>

运行结果

点击让其消失和出现

animate() - 使用队列功能

默认地,jQuery 提供针对动画的队列功能。

这意味着在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var div = $("div");
                div.animate({ height: '300px'opacity: '0.4' }, "slow");
                div.animate({ width: '300px'opacity: '0.8' }, "slow");
                div.animate({ height: '100px'opacity: '0.4' }, "slow");
                div.animate({ width: '100px'opacity: '0.8' }, "slow");
            });
        });
    </script>
</head>

<body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
        如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>

</body>

</html>

运行结果

点击

开始按照顺序变化

更明确一点

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var div = $("div");
                div.animate({ left: '100px' }, "slow");
                div.animate({ fontSize: '3em' }, "slow");
            });
        });
    </script>
</head>

<body>
    <button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
        如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

</html>

运行结果

点击运行

先向右移动字在变大

停止动画

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

例如

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideDown(5000);
            });
            $("#stop").click(function () {
                $("#panel").stop();
            });
        });
    </script>

    <style type="text/css">
        #panel,
        #flip {
            padding5px;
            text-aligncenter;
            background-color#e5eecc;
            bordersolid 1px #c3c3c3;
        }

        #panel {
            padding50px;
            displaynone;
        }
    </style>
</head>

<body>

    <button id="stop">停止滑动</button>
    <div id="flip">点我向下滑动面板</div>
    <div id="panel">Hello world!</div>

</body>

</html>

运行结果

点击下滑完整

中途点击停止动画

显示出字动画直接停止

Callback 方法,Callback 函数在当前动画 100% 完成之后执行。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide("slow"function () {
                    alert("段落现在被隐藏了");
                });
            });
        });
    </script>
</head>

<body>
    <button>隐藏</button>
    <p>我们段落内容,点击“隐藏”按钮我就会消失</p>
</body>

</html>

运行结果

点击

且弹出

很好用

剩下的明天再继续


返回列表 返回列表
评论

    分享到