6.2 .animate() 函式動畫效果

.animate() 函式：css 及 時間

比較以下兩個程式：

程式一：

$("div.div_block").animate({
  "width": "200px",
  "height": "300px",
  "font-size": "12px"
}, 10000);

程式二：

$("div.div_block").animate({
  "width": "+=10px",
  "height": "-=5px",
  "font-size": "+=2px"
}, 10000);

範例：6_2_animate.html

Easing 參數

第三個參數，可以是 swing (預設)或 linear：6_2_animate_easing.html

Complete Function 參數

動畫效果跑完後，執行自訂程式，也就是第四個參數，帶入自訂程式的 function：

範例：留言區域

1、先瞭解 .prop("scrollHeight")：

2、瞭解 animate 當中的 scrollTop：

上述重點：

// 重點1：以下方式取得 section.result_block(藍框) 的可捲動區域高度(不含邊框)
//console.log( $('section.result_block').prop("scrollHeight") );

// 重點2：透過 animate 使用 scrollTop 指定要滑動到離上方指定位置
$("section.result_block").animate({
  //scrollTop: 10
  scrollTop: $('section.result_block').prop("scrollHeight")
}, 500);

範例：6_2_animate_message.html