jq動畫學習,特別是關於動畫隊列

http://www.cnblogs.com/hh54188/archive/2011/04/09/1996469.html  動畫隊列解釋

animate

 

     必需的 params 參數定義形成動畫的 CSS 屬性。

 

     可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

 

　　可選的 callback 參數是動畫完成后所執行的函數名稱。

操作多個屬性

使用相對值

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
        left:'250px',
        height:'+=150px',//使用相對值
           width:'+=150px',
        opacity:'0.5',
                     },3000);
  });
});
</script>

jQuery animate() - 使用預定義的值

您甚至可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle"：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
}); 

jQuery animate() - 使用隊列功能

默認地，jQuery 提供針對動畫的隊列功能。

這意味着如果您在彼此之后編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的“內部”隊列。然后逐一運行這些 animate 調用。

實例 1

隱藏，如果您希望在彼此之后執行不同的動畫，那么我們要利用隊列功能：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

 

實例 2

下面的例子把 <div> 元素移動到右邊，然后增加文本的字號：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

 

 

dequeue([queueName])

概述

從隊列最前端移除一個隊列函數，並執行他。

 

參數

[queueName]StringV1.2

隊列名，默認為fx

 

 

什么意思呢？也就是說，當你使用一系列的動畫效果(如hide，show)，這些動畫函數都會被放進一個名為"fx"的隊列中，
然后在以先進先出的方式執行隊列中的函數，而非動畫函數，比如上面例子中的appendTo函數，則是不會進入這個隊列中，
並且先於動畫函數的執行，也就是在"fx"先進先出，取出第一個函數之前，它就已經執行了

$('div').slideUp('slow').slideDown('slow').queue(function(next){
$('#object').css({"background":"red"});
next();//next();
}).hide('slow');

一是我把next()語句注釋掉了，二是希望在變色以后再讓方塊隱藏起來。但是當你運行之后，發現在變色之后無法對方塊執行隱藏。

要記住queue中的函數是回調函數呀，默認情況下只有動畫隊列執行完了，才會調用變色函數，既然動畫隊列都執行完了，哪里來的hide()?所以next()是保證在執行完這次隊列后再次執行下一個動畫函數

我曾經嘗試過拋棄next參數而保留next()語句，這樣的結果是能在現代瀏覽器(firefox,chrome之類)中運行，但無法在ie6中運行。所以，保留吧 。
next和next()是jquery1.4中才開始出現的，而在之前使用的是.dequeue()函數，如果要將這節的例子改為使用dequeue()，如下：

$('#object').slideUp('slow').slideDown('slow').queue(function(){
$('#object').css({"background":"red"});
$(this).dequeue();
});

jQuery 遍歷 - queue() 方法

queue() 方法顯示或操作在匹配元素上執行的函數隊列。

.queue(queueName)  queueName  可選。字符串值，包含序列的名稱。默認是 fx, 標准的效果序列。

<style>div { margin:3px; width:40px; height:40px;
   position:absolute; left:0px; top:60px;
   background:green; display:none; }
div.newcolor { background:blue; }
p { color:red; }  </style>

<p>隊列長度是：<span></span></p>
<div></div>

<script>
   var div = $("div");

 function runIt() {
 div.show("slow");
 div.animate({left:'+=200'},2000);
 div.slideToggle(1000);
 div.slideToggle("fast");
 div.animate({left:'-=200'},1500);
 div.hide("slow");
 div.show(1200);
 div.slideUp("normal", runIt);
 }

 function showIt() {
 var n = div.queue("fx");
 $("span").text( n.length );
 setTimeout('showIt()', 100);
 //setTimeout(showIt, 100);//不加引號的寫法
 }

 runIt();
 showIt();
</script>

<p>隊列長度是：<span></span></p>
<div></div>

<script>
 var div = $("div");

 function runIt() {
 div.show("slow");
 div.animate({left:'+=200'},2000);
 div.slideToggle(1000);
 div.slideToggle("fast");
 div.animate({left:'-=200'},1500);
 div.hide("slow");
 div.show(1200);
 div.slideUp("normal", runIt);
 }

 function showIt() {
 var n = div.queue("fx");
 $("span").text( n.length );
 setTimeout('showIt()', 100);
 //setTimeout(showIt, 100);//不加引號的寫法
 }

 runIt();
 showIt();
</script>

setTimeout( )

　　setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的 method。

queue(element,[queueName])

概述

顯示或操作在匹配元素上執行的函數隊列

 

參數

element,[queueName]Element,StringV1.3

element:檢查附加列隊的DOM元素

queueName:字符串值，包含序列的名稱。默認是 fx, 標准的效果序列。

element,queueName,newQueue Element,String,Array V1.3

element:檢查附加列隊的DOM元素

queueName:字符串值，包含序列的名稱。默認是 fx, 標准的效果序列。

newQueue:替換當前函數列隊內容的數組

element,queueName,callback()Element,StringV1.3

element:檢查附加列隊的DOM元素

queueName:字符串值，包含序列的名稱。默認是 fx, 標准的效果序列。

callback():要添加進隊列的函數

示例

  <script>$("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);//跟$("div").queue("fx");
      $("div").stop();
    });</script>

$("div").queue("fx", []);跟$("div").queue("fx");的區別[]相當於替換了當前隊列的內容，其實也是類似於[0]跟[1]之類的區別，[]或者[0]就是隨點隨停

返回值:jQueryclearQueue([queueName])

概述

清空對象上尚未執行的所有隊列

如果不帶參數，則默認清空的是動畫隊列。這跟stop(true)類似，但stop()只能清空動畫隊列，而這個可以清空所有通過 .queue() 創建的隊列。

參數

queueNameBooleanV1.4

含有隊列名的字符串。默認是"Fx"，動畫隊列。

 

 

$("#stop").click(function(){
  $("#box").clearQueue();
});