jQuery—自定义动画

演示视频

		// Html部分
		<button>操作属性</button>
	    <button>累加属性</button>
	    <button>关键字</button>
	    <div class="one"></div>
	    <div class="two"></div>
    
		// CSS部分
		*{
            margin: 0;
            padding: 0;
        }
        .one {
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background: red;
        }
        .two {
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background: blue;
        }
        
		// JS部分
		$(function(){
            $("button").eq(0).click(function(){
                // $(".one").animate({
                //     width:500
                // },1000,function(){
                //     alert("自定义动画执行完毕")
                // })

                /*
                animate({},1000,swing/linear,function())   自定义动画实现函数
                第一个参数: 接收一个对象，可以在对象中修改属性
                第二个参数：指定动画时长
                第三个参数：指定动画节奏，默认是swing（匀速）
                第四个参数：动画执行完毕以后的回调函数
                */
                $(".one").animate({
                    marginLeft:500
                },1000,function(){
                    alert("自定义动画执行完毕")
                })
                $(".two").animate({
                    marginLeft:500
                },1000,"linear",function(){
                    alert("自定义动画执行完毕")
                })
            })
            $("button").eq(1).click(function(){
                $(".one").animate({
                    width: "+=100",      // 宽度累加100
                },1000,function(){
                    alert("自定义动画执行完毕")
                })
            })
            $("button").eq(2).click(function(){
                $(".one").animate({
                    width: "toggle",     // 宽度在有和无之间切换
                },1000,function(){
                    alert("自定义动画执行完毕")
                })
            })
        })