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)文章
easyui messager alert 三秒后自動關(guān)閉提示的實例
下面小編就為大家?guī)硪黄猠asyui messager alert 三秒后自動關(guān)閉提示的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
jQuery.form.js插件不能解決連接超時(timeout)的原因分析及解決方法
jQuery.form.js是一個form插件，支持ajax表單提交和ajax文件上傳。最近在使用jquery.form.js提交包含文件的表單時，當(dāng)碰上網(wǎng)速較慢時，而我們又設(shè)置了timeout時我們的頁面會死在這里，怎么回事呢，下面腳本之家小編給大家解答下2016-10-10
這個代碼，針對學(xué)習(xí)jquery插件制作的朋友可以參考下。效果并不是主要的。2010-05-05
jQuery圖片前后對比插件beforeAfter用法示例【附demo源碼下載】
這篇文章主要介紹了jQuery圖片前后對比插件beforeAfter用法,結(jié)合實例形式分析了beforeAfter插件的功能、參數(shù)用法與使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
jQuery插件HighCharts實現(xiàn)的2D對數(shù)餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D對數(shù)餅圖效果,結(jié)合實例形式分析了jQuery圖形插件HighCharts繪制2D對數(shù)餅圖的具體實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery實現(xiàn)垂直半透明手風(fēng)琴特效代碼分享
這是一款jquery hover抽屜式導(dǎo)航圖片展開收縮切換特效代碼，用戶還可以自定義對應(yīng)幻燈片的標題與文字說明，是一款非常實用的幻燈片特效源碼。2015-08-08
這篇文章主要介紹了jQuery實現(xiàn)二級下拉菜單效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
基于jQuery的360圖片展示實現(xiàn)代碼，需要的朋友可以參考下2012-06-06
Bookmarklet實現(xiàn)啟動jQuery(模仿 云輸入法)
最近流行的 sogo云輸入法， QQ云輸入法，都用到了bookmarklet技術(shù)。2010-09-09
JQUERY 瀏覽器判斷實現(xiàn)函數(shù)，如果只是為了判斷瀏覽器不建議用，如果你已經(jīng)用了jquery才用啊，要不沒必要因為這個小功能，加個那么大的類庫吧。2009-08-08