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