jQuery動畫

• jQuery動畫 - animate()方法

jQuery animate() 方法用于創建自定義動畫。

語法：
$(selector).animate({params},speed,callback);

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

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

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

• jQuery animate() - 操作多個屬性

請注意，生成動畫的過程中可同時使用多個屬性：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

• jQuery animate() - 使用相對值

也可以定義相對值（該值相對于元素的當前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

• jQuery animate() - 使用預定義的值
  您甚至可以把屬性的動畫值設置為 “show”、“hide” 或 “toggle”：

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

• jQuery animate() - 使用隊列功能

默認地，jQuery 提供針對動畫的隊列功能。
這意味著如果您在彼此之后編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的“內部”隊列。然后逐一運行這些 animate 調用。

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

$("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");
});

• jQuery stop() 方法用于在動畫或效果完成前對它們進行停止。

jQuery stop() 方法用于停止動畫或效果，在它們完成之前。
stop() 方法適用于所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。
語法

$(selector).stop(stopAll,goToEnd);

• CallBack回調函數

Callback 函數在當前動畫 100% 完成之后執行。

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

• Chainning 連接
  Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);