JQuery自定义动画

最新推荐文章于 2024-08-30 10:25:23 发布

原创最新推荐文章于 2024-08-30 10:25:23 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery自定义动画

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文介绍如何使用jQuery库中的animate()方法创建复杂的动画效果。通过按钮控制动画的开始与停止，演示了元素尺寸和位置的变化过程，展示了animate()方法的强大功能。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" value="GO" id="btnStartAnimate" />
    <input type="button" value="Stop" id="btnStopAnimate" />
    <div id="div1" style="width:20px;height:20px;background-color:aqua;position:absolute;left:100px;top:100px"></div>
    <script type="text/javascript">
        $(function () {
            $("#btnStartAnimate").click(function () {
                //调用animate()方法自定义动画
                $("#div1").animate({ "width": "+=200px", "height": "+=150px" }, 1000)
                    .animate({ "width": "-=150", "height": "+=150px" }, 1000)
                .animate({ "width": "+=250", "height": "+=150px" }, 1000)
                .animate({ "width": "-=200", "height": "-=200px" }, 1000)
                .animate({ "width": "300px", "height": "100px","left":"900px","top":"600px" }, 1000);
            });
            $("#btnStopAnimate").click(function () {
                //停止动画stop()方法，第一个bool参数是指是否清除动画队列，第二个bool参数是指是否跳到动画结尾
                $(":animated").stop(true,true);
            });
        });
    </script>
</body>
</html>