jquery隊(duì)列函數(shù)用法實(shí)例

更新時(shí)間：2014年12月16日 14:45:23 投稿：shichen2014

這篇文章主要介紹了jquery隊(duì)列函數(shù)用法,以實(shí)例形式分析了jQuery中隊(duì)列的用法以及控制樣式的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery隊(duì)列函數(shù)用法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!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 () {//入隊(duì)列

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

          $(this).dequeue();//出隊(duì)列

      });

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

      $("div").queue(function () {//入隊(duì)列

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

          $(this).dequeue();//出隊(duì)列

      });

      $("div").slideUp();

});

</script>

</body>

</html>

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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