6.2 .animate() 函式動畫效果

.animate() 函式

四個參數。

$("div.div_block").animate({
  "width": "200px",
  "height": "300px"
}, 5000, "swing", function(){
  // 動畫效果跑完後，執行這裡
});

第一個參數：帶入要操控的 CSS。

第二個參數：時間，單位是毫秒。

第三個參數，可以是 swing (預設)或 linear (從頭到尾等速)。

第四個參數：帶入匿名函式，動畫效果跑完後，執行匿名函式。

例：

範例：留言區域(介紹 scrollTop)

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

範例：頁面往上滑