JQUERY自定義動畫函式
自定義動畫函式包括了所有動畫效果的高階應用和高階技巧。
.animate() 執行自定義的動畫效果。 返回jQuery
.stop() 停止匹配元素當前正在執行的動畫效果。 返回jQuery
jQuery.fx.off 取消全部動畫效果 Boolean
.queue() 根據函式簽名不同，可以獲取指定佇列的函式集合(返回Array),或者操作某一個佇列(返回jQuery)
.dequeue() 執行匹配元素指定佇列中的下一個函式
.clearQueue() 清除佇列中的所有未執行函式 返回jQuey
.delay() 延時執行佇列中的函式 返回jQuey
1.jQuery佇列
對一個元素呼叫動畫函式時，會發現動畫是按照順序執行的：
$("#holder").hide(1000),fadeIn();
也許在一個jQuery鏈上順序執行不奇怪，但是可以同時執行兩次語句：
$("#holder").hide(1000),fadeIn();
$("#holder").hide(1000),fadeIn();
這時將會發現這四個動畫函式都是排隊順序執行的！
如果沒有佇列，hide()函式和fadeIn()函式並不會彼此等待，而是立刻全部執行完畢，但是jQuery中的動畫效果會排隊作用在元素上，“排隊”效果就是通過jQuery中的佇列實現的。
在jQuery內部，所有的動畫函式都會排列在名為"fx"的佇列中。jquery中提供了下列和佇列有關的函式
.queue([queueName]) queueName：為佇列的名字，預設是動畫佇列的名字"fx" 返回指定名字佇列的函式陣列。
.queue([queueName],newQueue) queueName:佇列的名字，預設是動畫佇列的名字"fx" newQueue：一個函式陣列，用於替換queueName佇列的內容 此函式用來替換指定的佇列內容
.queue([queueName],callback(next)) queueName:佇列的名字，預設是動畫佇列的名字"fx" callback(next):要新增到佇列中的函式 為指定佇列新增一個函式
.dequeue([queueName]) queueName:佇列的名字，預設是動畫佇列的名字"fx" 執行指定佇列中的某一個函式
.delay(duration, [queueName]) duration:字串或數字，表示延時的時間 queueName:佇列的名字，預設是動畫佇列的名字 “fx” 讓某一個佇列的執行延遲
jQuery中的queue和dequeue是一組很有用的方法，它們對於一系列需要按次序執行的函式特別有用。特別是animate自定義動畫,ajax,以及timeout等需要一定時間執行的函式
[html] view plaincopyprint?- <!DOCUTYPE HTML>
- <html>
- <head>
- <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
- </head>
- <body>
- <buttonid="show">Go</button>
- <divid="holder"style="position:relative; height:60px;">
- <divid="myDiv"style="border:solid 1px #000000; width:50px; height:50px; position:absolute;">
- 會動的圖層
- </div>
- </div>
- <divid="divMsg"style="border:solid 1px; width:100px;">
- [console]
- </div>
- <script>
- function go(){
- //alert($("#myDiv").queue.length);
- $("#divMsg").html($("#myDiv").queue.length);
- };
- $("#show").click(function(e){
- //執行一系列動畫
- $("#myDiv").show("slow",go);
- $("#myDiv").slideToggle(1000,go);
- $("#myDiv").slideToggle("fast",go);
- $("#myDiv").animate({left:'200px'},1500,go);
- $("#myDiv").hide("slow",go);
- go();
- });
- </script>
- </body>
- </html>
佇列實際上是一個函式陣列，要獲取佇列中函式陣列，上例中使用的是.queue([queueName])函式，其中queueName引數如果省略，則表示獲取預設的動畫佇列fx.
可以通過.queue([queueName],newQueue)設定一個佇列：
var myQueue = [
function(){alert("1"); go(); $(this).dequeue();},
function(){}
];
其中newQueue引數是一個函式陣列；
除了傳遞函式陣列替換全部佇列，還可以為佇列新增一個函式。比如：
$("#myImg").slideup();
$("#myImg").queue(function(){alert('add a function');$(this).dequeue();});
上面的程式碼等同於：
$("#myImg").slideUp(function(){alert('add a function'); $(this).dequeue();});
特別需要注意，新增的函式一定要執行dequeue()函式。dequeue() 函式相當於將當前佇列中的最前面的一個函式取出，並執行。
下面會首先執行slideUp()函式滑動隱藏，然後顯示提示語句，再執行slideDown()函式
$("#myImg").slideUp();
$("#myImg").queue(function(){alert('add a function'); $(this).dequeue();});
$("#myImg").slideDown();
如果將dequeue()函式去掉：
$("#myImg").slideUp();
$("#myImg").queue(function(){alert('add a function'); });
$("#myImg").slideDown();
在顯示提示文字"add a function"後，slideDown()函式不再執行在jQuery1.4版本後，當呼叫佇列函式時，多了一個引數：
.queue([queueName],callback(next))
next引數是一個函式，呼叫next等同於手工呼叫dequeue()函式：
$("#myImg").slideUp();
$("#myImg").queue(function(next){alert('add a function'); next(); });
$("#myImg").slideDown();
在使用佇列時，也常會使用delay()函式。delay()可以為某一個佇列新增延時。
$("#myImg").slideUp().delay(1000).slideDown();
上面的例子中，當slideUp執行完畢後，會等待1秒鐘，再執行slideDown()函式。
2.動畫全域性開關
jQuery提供了一個全域性的屬性
jQuery.fx.off
來關閉所有的動畫效果。
3.停止元素動畫
.stop([clearQueue], [jumpToEnd])
當stop()函式呼叫後，動畫會停留在當時的狀態上，並且動畫的callback()回撥函式也不會被呼叫
但是預設不帶引數的stop()函式並不總是停止動畫的執行。這是因為stop()函式會停止動畫隊列當前的函式，如果動畫佇列中還有函式的話，後面的函式會立刻執行
$("#myDiv").show("slow");
$("#myDiv").animate({left:'+=200'},2000);
$("#myDiv").animate({left:'-=200'},1500);
$("#myDiv").hide("slow");
在正常情況下，圖層會運動到指定的位置，然後在返回。
但是如果在運動過程中，比如在
$("#myDiv").animate({left;'+=200'},2000);
過程中，執行：
$("#myDiv").stop();
會發現圖層立刻向回移動，也就是開始執行：
$("#myDiv").animate({left:'-=200'},1500)
所以，如果希望stop()函式不僅僅停止當前動畫，同時清楚佇列時，可以傳遞clearQueue引數
$("#myDiv").stop(true,false);
4.自定義動畫效果
animate()函式必須傳遞的引數只有一個：CSS屬性集合。這個使用.css()函式時傳遞的集合是一樣的，但是要求更嚴格。支援的CSS屬性，必須要使用數字值。
所有指定的屬性必須用駱駝形式，比如用marginLeft 代替margin-left
如果使用的是"hide" "show" "toogle"這樣的字串值，則會為該屬性呼叫預設的動畫形式：
另外屬性值還可以是相對值。可以在數字前面新增"+="或"-="。"+="表示在當前值基礎上增加，"-="表示在當前值基礎上減少。
實現物體消散效果
$("#myDiv").animate({
"opacity": "hide",
"width" : $(window).width()-100,
"height": $(window).height()-100
},500)
[html] view plaincopyprint?- <!DOCTYPE html>
- <head>
- <metacharset="UTF-8">
- <title>Chainable Transition Effects</title>
- <scripttype="text/javascript"src="jquery.js"></script>
- <scripttype="text/javascript">
- $(document).ready(function(){
- $(".run").click(function(){
- $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
- .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
- .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
- .animate({top: "0"}, "fast")
- .slideUp()
- .slideDown("slow")
- return false;
- });
- });
- </script>
- <styletype="text/css">
- body { margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; }
- a { font-weight: bold; color: #000000; }
- #box { background: #6699FF; height: 100px; width: 100px; position: relative; }
- </style>
- </head>
- <body>
- <p><ahref="#"class="run">Run</a></p>
- <divstyle="opacity: 1; left: 0px; top: 0px; height: 100px; display: block; width: 100px;"id="box"></div>
- </body>
- </html>