jQuery自定义动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            
            div{
                width: 100px;
                height: 100px;
                margin-top: 10px;
                background: red;
            }
            
            .two{
                background: blue;
            }
        </style>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                /*
                 第一个参数
                     接受一个对象，可以在对象中修改属性。
                 第二个参数
                     指定动画时常。
                 第三个参数
                     指定动画节奏，默认就是swing，可写可不写
                 第四个参数
                     动画结束后执行的回调函数。
                 */
                $("button").eq(0).click(function(){
//                    三个参数的情况。
//                    $(".one").animate({
//                        width:500
//                    },1000,function(){
//                        
//                    });

                    //四个参数的情况,第三个参数可以控制运动的轨迹。liner是匀速执行。swing是默认的，前慢中快后慢
                    $(".one").animate({
                        marginLeft:500
                    },5000,"linear",function(){
                        
                    });
                    
                    $(".two").animate({
                        marginLeft:500
                    },5000,"swing",function(){
                        
                    });
                });
                
                
                /*
                 * 累加属性
                 *         在原本属性的基础上增加属性。
                 *         需要在对象里的参数值写字符串 "+=你想累加的数值"
                 */
                
                $("button").eq(1).click(function(){
                    
                    $(".one").animate({
                        width:"+=100"    //一次在原本基础上增加100px
                    },1000,"linear",function(){
                        
                    });
                });
                
                
                /*
                 * 关键字
                 *         使元素按照关键字进行动画。
                 */
                $("button").eq(2).click(function(){
                    
                    $(".one").animate({
                        //width:"hide"    //使宽度隐藏。
                        width:"toggle"    //如果有宽度就隐藏，没宽度就显示
                    },1000,"linear",function(){
                        
                    });
                });
            });
        </script>
    </head>
    <body>
        <button>操作属性</button>
        <button>累加属性</button>
        <button>关键字</button>
        <div class="one"></div>
        <div class="two"></div>
    </body>
</html>
猜你喜欢
