Jquery9_复杂动画效果

最新推荐文章于 2022-09-03 14:37:55 发布

「已注销」

最新推荐文章于 2022-09-03 14:37:55 发布

阅读量642

点赞数

分类专栏： JQuery 文章标签： Jquery 动画

本文链接：https://blog.csdn.net/wo_shi_chuan_qi_007/article/details/9280331

版权

JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

=======可以自定义动画效果的方法animate（）==========

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #d1{width:100px;height:100px;position:absolute;background-color:lightgreen;left:10px;top:40px;filter:alpha(opacity=0);}
    </style>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                // 自定义动画函数参数：设置样式达到效果的事件 "不知道" 动画执行完要做的事情
                // 先执行非动画如设置样式，若想让样式最后执行，要把设置的样式放到最后一个参数function()中
                $("#d1").animate({ "left": "300", "top": "300", "width": "200", "height": "200" }, 4000).animate({ "left": 800, "top": "50", "width": "100", "height": "140" }, 5000, function () {
                    $("#d1").css("display", "none");
                });
            });

            // 向左
            $("#btn2").click(function () {
                $("#d1").animate({"left":"-=80"},1000);
            });

            // 向右
            $("#btn3").click(function () {
                $("#d1").animate({ "left": "+=80" }, 1000);
            });
        });

    </script>
</head>
<body>
    <input id="btn" type="button" value="动画" />

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

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery9_复杂动画效果

=======可以自定义动画效果的方法animate（）==========http://www.w3.org/1999/xhtml"> #d1{width:100px;height:100px;position:absolute;background-color:lightgreen;left:10px;top:40px;filter:alpha
复制链接

扫一扫

专栏目录