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模拟实现的select点击选择效果【附demo源码下载】
这篇文章主要介绍了jQuery模拟实现的select点击选择效果,涉及jQuery响应鼠标点击动态修改页面元素样式的相关操作技巧,并附带demo源码供读者下载,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了jquery插件Jplayer使用方法简析，具有实用价值，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了jQuery实现网站添加高亮突出显示效果的方法,涉及jQuery针对页面元素与样式的操作技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了jquery中change()用法,实例分析了change的功能、定义及具体的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
Jquery跨域获得Json时invalid label错误的解决办法
这两天用 Jquery 跨域取数据的时候，经常碰到 invalid label 这个错误，十分的郁闷，老是取不到服务器端发送回来的 json 值，一般跨域用到的两个方法为：$.ajax 和 $.getJson2011-01-01
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
这篇文章主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下2017-03-03
本文将利用jquery实现页面图片等比例放大和缩小。说明: 页面中经常需要将未知大小的图片展示在有限的空间里, 如果直接指定图片的width和height值, 就有可能造成图片走样, 这段代码就是为解决这个问题设计2014-02-02
这篇文章主要介绍了jQuery封装的屏幕居中提示信息代码,可以很方便的集成到项目开发中使用,涉及jQuery针对页面元素的动态操作技巧,需要的朋友可以参考下2016-06-06
最近做前端设计时需要使左右两个DIV高度自适应。这其中的jquery代码中的获得高度用的clientHeight，介绍一下几种不同的获得方式以及他们的差别2012-08-08
jqGrid日期格式的判断示例代码(开始日期与结束日期)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
最新评论