jQuery 入門教程(8): 動畫效果

前面的hide/show,slide in/out其實也具有動畫效果，本篇介紹使用animate()實現自訂動畫效果。 基本文法如下： $(selector).animate({params},speed,callback); 必選的參數為params,定義CSS用於動畫效果的的屬性。 選擇性參數speed給出了淡入效果的時間，可以使用 “slow”,”fast” 或是數值（微秒）第二個選擇性參數為回呼函數，在animate()方法結束後調用。 比如下面的例子，將一個<div>標記移動到其Left屬性等於250px.  [javascript]  $("button").click(function(){    $("div").animate({left:'250px'});  });   $("button").click(function(){  $("div").animate({left:'250px'});});   要注意的是，預設情況下，所有HTML元素的位置的固定的，不能移動，因此如果需要修改HTML元素的位置，需要事先將它們的CSS屬性的位置設定為relative, fixed, 或absolute。 使用animate 修改多個屬性下面的例子，可以使用animate同時修改多個屬性： [javascript]  $("button").click(function(){    $("div").animate({      left:'250px',      opacity:'0.5',      height:'150px',      width:'150px'    });  });   $("button").click(function(){  $("div").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });});  注意：基本所有的CSS屬性都可以在animation中使用，顏色修改不在jQuery核心庫中，需要Color Animiation外掛程式來完成。 使用屬性相對值對於CSS屬性，除了上面使用的絕對大小，也可以使用相對值來定義，使用 “+”“-”。  [javascript]  $("button").click(function(){    $("div").animate({      left:'250px',      height:'+=150px',      width:'+=150px'    });  });   $("button").click(function(){  $("div").animate({    left:'250px',    height:'+=150px',    width:'+=150px'  });}); 使用預定義的值也可以使用預定義的值為屬性賦值。比如”show”, “hide”, 或 “toggle”:   [javascript] $("button").click(function(){    $("div").animate({      height:'toggle'    });  });   $("button").click(function(){  $("div").animate({    height:'toggle'  });}); 使用隊列功能預設jQuery支援將多個animation功能串起來構從一個隊列，然後一個一個的執行隊列中的指令。比如：   [javascript]  $("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");  });   $("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");});或  [javascript]  $("button").click(function(){    var div=$("div");  www.2cto.com  div.animate({left:'100px'},"slow");    div.animate({fontSize:'3em'},"slow");  });   $("button").click(function(){  var div=$("div");  div.animate({left:'100px'},"slow");  div.animate({fontSize:'3em'},"slow");});