jquery隊列函數(shù)用法實例
更新時間：2014年12月16日 14:45:23 投稿：shichen2014
這篇文章主要介紹了jquery隊列函數(shù)用法,以實例形式分析了jQuery中隊列的用法以及控制樣式的技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
本文實例講述了jquery隊列函數(shù)用法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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程序設(shè)計的學(xué)習(xí)有所幫助。
相關(guān)文章
jQuery模擬實現(xiàn)的select點擊選擇效果【附demo源碼下載】
這篇文章主要介紹了jQuery模擬實現(xiàn)的select點擊選擇效果,涉及jQuery響應(yīng)鼠標(biāo)點擊動態(tài)修改頁面元素樣式的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了jquery插件Jplayer使用方法簡析，具有實用價值，感興趣的小伙伴們可以參考一下2016-04-04
jQuery實現(xiàn)網(wǎng)站添加高亮突出顯示效果的方法
這篇文章主要介紹了jQuery實現(xiàn)網(wǎng)站添加高亮突出顯示效果的方法,涉及jQuery針對頁面元素與樣式的操作技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jquery中change()用法,實例分析了change的功能、定義及具體的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
Jquery跨域獲得Json時invalid label錯誤的解決辦法
這兩天用 Jquery 跨域取數(shù)據(jù)的時候，經(jīng)常碰到 invalid label 這個錯誤，十分的郁悶，老是取不到服務(wù)器端發(fā)送回來的 json 值，一般跨域用到的兩個方法為：$.ajax 和 $.getJson2011-01-01
jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法
這篇文章主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法,結(jié)合實例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
本文將利用jquery實現(xiàn)頁面圖片等比例放大和縮小。說明: 頁面中經(jīng)常需要將未知大小的圖片展示在有限的空間里, 如果直接指定圖片的width和height值, 就有可能造成圖片走樣, 這段代碼就是為解決這個問題設(shè)計2014-02-02
這篇文章主要介紹了jQuery封裝的屏幕居中提示信息代碼,可以很方便的集成到項目開發(fā)中使用,涉及jQuery針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2016-06-06
基于jQuery實現(xiàn)左右div自適應(yīng)高度完全相同的代碼
最近做前端設(shè)計時需要使左右兩個DIV高度自適應(yīng)。這其中的jquery代碼中的獲得高度用的clientHeight，介紹一下幾種不同的獲得方式以及他們的差別2012-08-08
jqGrid日期格式的判斷示例代碼(開始日期與結(jié)束日期)
jqGrid日期格式的判斷示例代碼(開始日期與結(jié)束日期)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11