jQuery animate()動畫效果

1.jQuery動畫效果

jQuery animate()方法用於建立自定義動畫

$(selector).animate({params},speed,callback);
//必需的 params 參數定義造成動畫的 CSS 屬性；
//可選的 speed 參數規定效果的時長,它能夠取如下值："slow"、"fast" 或毫秒；
//可選的 callback 參數是動畫完成後所執行的函數名稱；

下面爲幾個實例：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
//點擊button按鈕時div塊向左右(取決於當前位置)移動的同時放大150px；
//其中'+='爲相對變化，再次點擊button時div塊繼續放大150px；


$("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");
});
//編寫多個 animate() 調用，jQuery 會建立包含這些方法調用的「內部」隊列，而後逐一運行這些 animate 調用；


$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});
//能夠把屬性的動畫值設置爲 "show"、"hide" 或 "toggle"；
//點擊button時，div塊向上收縮，再次點擊向下展開；

 2.jQuery中止動畫

jQuery stop() 方法用於中止動畫或效果，在它們完成以前

stop() 方法適用於全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫

$(selector).stop(stopAll,goToEnd);
//可選的 stopAll 參數規定是否應該清除動畫隊列,默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行；
//可選的 goToEnd 參數規定是否當即完成當前動畫，默認是 false；

轉載自本人ITeye連接：http://xiaozhuang0706.iteye.com/blog/2257182