jq 自定义动画animate

来源:互联网 发布:淘宝宠物店推荐 编辑:程序博客网 时间:2024/05/21 18:21

点击打开链接

<style>
            .box1{
                width: 200px;
                height: 200px;
                background: deeppink;
            }
            .box2{
                width: 200px;
                height: 200px;
                background: chartreuse;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
    <script src="js/js/jquery-1.12.4.min.js"></script>
    <script src="js/js/jquery.easing.1.3.js"></script>
    <script >
        $('.box1').on('mouseover',function(){
            $(this).animate({width:400,height:400},'slow','easeInOutBack',function()
            {
            console.log('我是回调函数');
        });
        });
        
        $('.box2').on('mouseover',function(){
            $(this).animate({left:500},'slow',function(){
                $(this).animate({top:500},'slow',function(){
                    $(this).animate({left:0},20000,function(){
                        $(this).animate({top:0},'slow');
                    });
                });
            });
        });

    </script>

原创粉丝点击