深入学习jQuery动画队列

前面的话

　　队列实现是jQuery非常棒的一个拓展，使用动画队列可以使动画更容易实现。本文将详细介绍jQuery动画队列

queue()

　　queue()方法用来显示在匹配的元素上的已经执行的函数队列

queue([queueName])

　　queue()方法可以接受一个可选参数——一个含有队列名的字符串。该参数默认是'fx'

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
    setInterval(function(){
        $('#result').html('队列数是:' +$('#box').queue().length)
    },100)
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000).animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
</script>