jQuery—stop和delay方法

		// Html部分
		<button>开始动画</button>
	    <button>停止动画</button>
	    <div class="one"></div>
	    <div class="two"></div>
	
		// CSS部分
		*{
            margin: 0;
            padding: 0;
        }
        .one{
            width: 100px;
            height: 100px;
            background: red;
        }
        .two{
            width: 500px;
            height: 10px;
            background: blue;
        }

		// JS部分
		$(function(){
            $("button").eq(0).click(function(){
                // 在animate的{}中，可以同时修改多个属性，多个属性的动画也会同时执行
                // 如果不想同时执行，那就先后写两个animate
                // $(".one").animate({
                //     width:500,
                //     height:500
                // },1000)

                // delay()方法用于告诉系统暂停的时间
                // $(".one").animate({
                //     width:500
                // },1000).delay(2000).animate({    // 执行完宽度动画以后等待两秒
                //     height:500
                // },1000)

                // stop()方法  立即停止当前的动画，继续执行之后的动画
                $(".one").animate({
                    width:500
                },1000).animate({
                    height:500
                },1000).animate({
                    width:100
                },1000).animate({
                    height:100
                },1000)
            });
            $("button").eq(1).click(function(){
                // stop()的两个参数
                // 第一个参数：是否停止后续动画，默认false不停止，值为true为停止后续动画。
                // 第二个参数：是否立即完成当前动画，默认值为false，值为true立即完成当前动画。
                $("div").stop();
                $("div").stop(false);
                $("div").stop(false,false);

                // 立即停止当前和后续的动画
                $("div").stop(true)

                // 立即完成当前的，继续执行后续的
                $("div").stop(false,true)

                // 立即完成当前的，并且停止后续所有的
                $("div").stop(true,true)
            })
        })