前面的话

  队列完毕是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>

<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>

queue(callback(next))

  queue()方法还可以七个回调函数作为参数,表示将在加多到行列中的新函数

  [注意]queue()方法的回调函数中,能够开始展览体制转变等,但无法扩充动画效果

  由下边代码实践结果能够见见,队列试行完函数后,队列前面的动画片效果被结束,这时就须要采纳上边要介绍的dequeue()方法

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="reset">恢复</button>

<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);
  $('#box').queue(function(){
      $('#box').css('background','lightgreen');
  })
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
</script>

dequeue()

  dequeue()方法用来施行相称成分队列的下多少个函数

dequeue([queueName])

  dequeue()方法能够承受1个可选参数——2个含有队列名的字符串,默许是fx

  [注意]dequeue()方法自身也算队列的1员

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="reset">恢复</button>

<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);
  $('#box').queue(function(){
      $(this).css('background','lightgreen');
      $(this).dequeue();
  })
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);

});
</script>

clearQueue()

  与deQueue()方法相反,clearQueue()方法用来从列队中移除全数未实行的项

  [注意]clearQueue()并不影响当下动画效果

clearQueue([queueName])

  clearQueue()方法还可以2个可选参数——3个含有队列名的字符串,私下认可是fx

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="btn1">停止动画</button>
<button id="reset">恢复</button>

<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);
  $('#box').queue(function(){
      $(this).css('background','lightgreen');
      $(this).dequeue();
  })
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);

});
$('#btn1').click(function(event){
    $('#box').clearQueue();
})
</script>

相关文章

网站地图xml地图