期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

jQuery动画队列queue()方法

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

队列的本质是一个数组,对队列的理解先从数组的push和shift开始。push是从数组尾端插入新的元素,shift是从数组首端删除元素;分别对应队列中得queue和dequeue。

jquery所有动画基于animate方法,而animate的动画默认保存在名为fx的动画队列中。

queue就是将动画放进队列中,dequeue就是将动画从队列中删除并执行它。

queue()

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

queue([queueName])

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

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  	</head>  	<body>  <script src="../js/jquery-1.11.3.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>  	</body>  </html>

queue(callback(next))

  queue()方法可以接受一个回调函数作为参数,表示将要添加到队列中的新函数

  [注意]queue()方法的回调函数中,可以进行样式变换等,但不可以增加动画效果

  由下面代码执行结果可以看出,队列执行完函数后,队列后面的动画效果被停止,这时就需要用到下面要介绍的dequeue()方法

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  	</head>  	<body>  <script src="jquery-1.11.3.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);    $('#box').queue(function(){        $('#box').css('background','lightgreen');    })    $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);  });  </script>  	</body>  </html>

dequeue()

  dequeue()方法用来执行匹配元素队列的下一个函数

dequeue([queueName])

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

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

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  	</head>  	<body>  <script src="jquery-1.11.3.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);    $('#box').queue(function(){        $(this).css('background','lightgreen');        $(this).dequeue();    })    $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);    });  </script>  	</body>  </html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册