jquery动画2

最新推荐文章于 2022-12-13 13:43:21 发布

万剑

最新推荐文章于 2022-12-13 13:43:21 发布

阅读量525

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qingchunweiliang/article/details/71711630

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
        $(function () {


            $('#but').click(function (event) {

//                animate()可以指定持续时间和结束回调

//                默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
//                如果需要改变为，我们需要将元素的 position 属性设置为 relative,
//                fixed, 或 absolute!

//                当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，
//                必须使用 paddingLeft 而不是 padding-left，使用 marginRight
//                而不是 margin-right，等等

//                $("div").animate({
//                    left: '250px',
//                    opacity: '0.5',
//                    height: '150px',
//                    width: '150px',
//                    marginTop:'150px'
//                },2000,function () {
//                    //结束回调
//                });


//                $("div").animate({
//                    left:'+=20px',
//                    height:'+=30px',
//                    width:'+=20px'
//                });


//                $("div").animate({
//                    height:'toggle'
//                });


//                jQuery 提供针对动画的队列功能。
//                这意味着如果您在彼此之后编写多个 animate() 调用，
//                jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
//                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");



//                .stop(stopAll,goToEnd)
//                可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
//                可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
//                因此，默认地，stop() 会清除在被选元素上指定的当前动画。
                
            })

        });
    </script>
</head>
<body>
<button id="but">
    按钮
</button>


<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>


</body>

<style>

    .container {
        background-color: gray;
        width: 600px;
        height: 420px;
        display: flex;
        flex-direction: row;
    }

</style>
</html>