jquery队列函数用法实例
更新时间：2014年12月16日 14:45:23 投稿：shichen2014
这篇文章主要介绍了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>
<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>
希望本文所述对大家jQuery程序设计的学习有所帮助。
相关文章
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
最近做了一个项目，其中有需求要求实现发送短信验证码后倒计时功能，其中有个难点：要求关闭页面也进行倒计时。好吧，下面小编把jquery 发送验证码倒计时的实现代码分享给大家，大家可以参考下2016-09-09
本文重点个大家讲解了几个jQuery中ajax的load()方法的使用实例，load()方法是jQuery中最为简单和常用的Ajax方法，能远程载入HTML代码并插入DOM中2015-01-01
本文介绍了jQuery实现用户输入自动完成功能的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
二维码在现实生活中已经应用很广泛，本篇介绍了使用jquery.qrcode.js生成二维码，有需要的朋友可以进来了解一下。2016-10-10
这篇文章主要为大家详细介绍了jquery插件ajaxupload实现文件上传操作，感兴趣的小伙伴们可以参考一下2015-12-12
多个datatable共存造成多个表格的checkbox都被选中
所以当有多个datatable 引用到一个页面中的时候，全选事件会匹配全部的datatable，所以造成全部多个表格的checkbox被都被选中2013-07-07
文本溢出插件jquery.dotdotdot.js使用方法详解
这篇文章主要介绍了文本溢出插件jquery.dotdotdot.js使用方法详解,需要的朋友可以参考下2017-06-06
刚看到个问题，如何得知同时按下了哪几个键以及按键顺序（难道是格斗游戏的组合键？），其实jQuery实现起来是很简单的。2010-03-03
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
dotNetFlexGrid是一款dotNet原生的异步表格控件，他的前身是Jquery FlexiGrid插件，我们重构了FlexiGrid的大部分Javascript代码，使其工作的更有效率，BUG更少；同时将其封装为dotNet控件，提供了简单易用的使用方式。2010-09-09
最新评论