jquery队列函数用法实例_JavaScript

jquery队列函数用法实例

2021-05-21 16:38jQuery教程网 JavaScript

这篇文章主要介绍了jquery队列函数用法,以实例形式分析了jQuery中队列的用法以及控制样式的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jquery队列函数用法。分享给大家供大家参考。具体实现方法如下：

复制代码代码如下:

	<!DOCTYPE>

	<html>

	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<script type="text/javascript" src="jquery-1.9.1.js"></script>

	</head>

	<body>

	<style>

	  div { margin:3px; width:40px; height:40px;

	        position:absolute; left:0px; top:30px;

	        background:green; display:none; }

	  div.newcolor { background:blue; }

	  </style>

	  Click here...

	  <div></div>

	<script>

	$(document.body).click(function () {

	      $("div").show("slow");

	      //$("div").slideDown();

	      $("div").animate({left:'+=200'},2000);

	      $("div").queue(function () {//入队列

	          $(this).addClass("newcolor");

	          $(this).dequeue();//出队列

	      });

	      $("div").animate({left:'-=200'},2000);

	      $("div").queue(function () {//入队列

	          $(this).removeClass("newcolor");

	          $(this).dequeue();//出队列

	      });

	      $("div").slideUp();

	});

	</script>

	</body>

	</html>