問題:日程提醒(跟日曆同樣的切換效果),只用一個div來展現當天日程數據,每次清空div裏的數據再加載數據,致使切換日期時,數據展現div有閃動,因而採用動畫來進行過渡,這樣就巧妙地避免了閃動;ide
$("#siteInfo").hide(function () { $("#siteInfo").empty(); getSite(); }).fadeIn();
但因爲動畫有完成時間,致使頻繁切換日期的時候出現了動畫累積的現象,操做中止後累積的動畫仍在繼續,這樣的用戶體驗感是不好的,因而想到了stop()方法來中止動畫動畫
$("#siteInfo").stop().hide(function () { $("#siteInfo").empty(); getSite(); }).fadeIn();
看起來不錯,但總以爲還差點什麼,原來stop()只中止了第一個動畫( [ hide() ] ),對於後續的多個動畫( [ fadeIn() ] ... )就無能爲力了;
而後看了一下stop()的語法:spa
$("element").stop([clearQueue][,gotoEnd]);
clearQueue:bool,表明是否要清空未執行的動畫隊列
gotoEnd:bool,有前一個參數纔有此參數,表明將正在執行的動畫直接跳到末狀態
試試一個參數
stop(true)
它將後續動畫所有清空了,頻繁切換的時候,它基本會保持在當前狀態,中止操做後完成最後一次數據加載,是可行的;
stop(false)
跟忽略它吧,什麼效果也沒有
試試兩個參數
stop(false,false),跟stop()同樣
stop(false,true),第一個動畫直接跳到末尾,接着繼續後面的動畫,因此是不知足效果的
stop(true,false),跟stop(true)同樣
stop(true,true),跳到第一個動畫末尾,後續動畫所有中止code