javascript - jquery queue队列中的动画出现并行执行的情况

Question

按照教程写的很简单的jquery动画队列，不知道为什么第一队列和第二队列的两个动画出现同步执行，找了半天都不知道哪里写错了。。
html和css代码如下：

<p class="banner">
    <p id="banner_1">
        <p class="step1"></p>
        <p class="step2"></p>
        <p class="step3"></p>
    </p>
</p>
<p id="aaa"></p>

<style>
.banner>p{border:solid red 1px;position:relative;width:300px;height:250px}
.step1{position:absolute;background:red;width:20px;height:20px;top:50px;left:50px}
.step2{position:absolute;background:#00f;width:20px;height:20px;top:50px;left:150px}
.step3{position:absolute;background:green;width:20px;height:20px;top:150px;left:150px}
</style>

js代码如下
<script>

var _slideFun1 = [
    function () {$('.step1').delay(500).animate({left: '+=100'}, 1000, _token1);},
    function () {$('.step2').delay(500).animate({left: '+=100'}, 1000, _token1);},
    function () {$('.step3').delay(500).animate({left: '+=100'}, 1000, _token1);},
];
$('#aaa').queue('fx',_slideFun1);

function _token1(){
    $('#aaa').dequeue('fx');
}
_token1();

</script>

Answer 1

http://www.tuicool.com/articl...