jquery animate

jquery animate 动画先后顺序执行

HTML

<div class="test">
    <button>go</button>
    <div class="box1 box">
         <h1>lalalalalla</h1>
    </div>
    <div class="box2 box">
         <h1>hahahahahha</h1>
    </div>
</div>

CSS

* {
			    margin: 0;
			    padding: 0;
			}
			body {
			    font: 12px/1.5 arail;
			}
			ul {
			    list-style: none;
			}
			button {
			    height: 2em;
			    font-size: 14px;
			    width: 4em;
			    background: orange;
			    color: #fff;
			    border-radius: 3px;
			    cursor: pointer;
			    margin-bottom: 10px;
			    border: 1px solid #eee;
			}
			.box {
			    position: absolute;
			    border: 1px solid orange;
			    height: 40px;
			    line-height: 40px;
			    width: 160px;
			    background: #eee;
			    text-align: center;
			}
			.box2 {
			    top: 120px;
			}

JavaScript

$(function () {

        $('.box1').animate({
            left: '+=100px'
        }, {
            duration: 2000,
            complete: function () {
                $('.box2').animate({
                    left: '+=100px'
                }, 2000);
            }
        });
    });
});