jquery animate

等待动画队列完成后再执行

HTML

<div class="test">
    <button>go</button>
    <div class="box1 box">
         <h1>lalalala方芳芳lla</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 () {
    var effect = function () {
        animateFlag = false;
        $('.box1').animate({
            left: '+=100px'
        }, 1000);
        $('.box2').animate({
            left: '+=100px'
        }, 1000, function () {
            animateFlag = true;
        });
    };
    var animateFlag = true;
    $('button').on('click', function () {
        if (animateFlag) {
            effect();
            // console.log('animate执行后的值是：'+animateFlag);
        }
    });
});