Edit in JSFiddle

$(function () {
    var queueList = [

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

    function () {
        $('.box2')
            .animate({
            left: '+=100px'
        }, 2000, startAnimate);
    }];
    $('.test').queue('animationList', queueList);

    function startAnimate() {
        $('.test').dequeue('animationList');
    };
    $('button').on('click', function () {
        startAnimate();
    });
});

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

			* {
			    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;
			}