欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自定义动画

程序员文章站 2024-02-05 11:40:10
...

自定义动画
Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery之自定义动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width:200px;
            height: 200px;
            background-color: purple;
            position: relative;
            margin-top: 50px;

            left: 0;
            right:0;
            top: 0;
            bottom: 0;
        }
    
    </style>
    <script src="../../js/jquery.min.js"></script>
    <script>
        $(function(){

        //使用animate()方法创建自定义动画
        //自定义动画传入的对象,可以传入css样式属性:width,height
        $('#animateMoveRight').on('click',function(){
            $('.box').animate({left:200,top:200},2000);

        });

        $('#animateMoveLeft').on('click',function(){
            $('.box').animate({left:0,top:0},2000);

        });

        });
    </script>
</head>
<body>
    <button id="animateMoveRight">动画向右移动</button>
    <button id="animateMoveLeft">动画向左移动归零</button>
    <div class="box"></div>
</body>
</html>
相关标签: JQuery jquery js