JQuery自定义动画

最新推荐文章于 2022-09-23 17:23:20 发布

一只极度渴望成长的Giser

最新推荐文章于 2022-09-23 17:23:20 发布

阅读量200

点赞数

分类专栏： Javascript、JQuery练习文章标签： JQuery自定义动画

本文链接：https://blog.csdn.net/qq_32077521/article/details/100014252

版权

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

69 篇文章 1 订阅

订阅专栏

<!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>

一只极度渴望成长的Giser

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery自定义动画

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> &...
复制链接

扫一扫

专栏目录