1. 程式人生 > >jQuey動畫-再研究

jQuey動畫-再研究

jQuery動畫通常使用動畫時長作為可選的第一個函式,如果省略時長,會得到
預設值400ms;
“fast”-200ms, “slow” -600ms,
可以在jQuery.fx.speeds物件中檢視,修改,新增自己定義時長的名稱

console.log(jQuery.fx.speeds);
//列印結果 : {slow:600, fast:200,_default:400}

簡單動畫

  1. fadeIn() , fadeOut() , fadeTo() (opactity,display,…)
  2. show() , hide() , toggle() (opacity,width,height,display,…)
  3. slideDown() , slideUp(), slideToggle() (height,display,…)
  4. 經在瀏覽器控制檯test,動畫函式改變元素的屬性,與元素已存在的屬性有關.
    通常連續改變opactity ,width,height , 最後或開始改變display屬性值,實現動畫
    通常引數是 time , callback(), 或一個物件
    { duration:time, complete:Function };
    $(‘div’).fadeIn().delay(1000).queue(function(next){}).hide().show(400)
    div元素會消失,

    這說明了hide()動化沒有進佇列,而是立即執行了,show(400)的動化進隊列了並且沒有被執行;
    hide(),show(),沒有引數時,它就不是動畫,而是改變display屬性值的普普通通函式.

自定義動畫

animate()
引數通常是兩個物件
動畫屬性物件:指定要變化的CSS屬性和它們的目標值
動畫選項物件: 指定動畫如何執行
duration:動畫持續事間
complete: 動畫完成時的回撥函式
queue:指定動畫是否佇列化------
easing:緩動函式(?)

//分析這段程式碼
$("div").fadeTo(0.5,500)
.animate({"width":"+=100",{queue:false,duration:5000}})
.fadeOut(2000);
//animate()的呼叫在5s內連續改變width屬性的動畫是非佇列化得,所以這段動畫會立即執行
並且與fadeIn()動畫開始的事間相同,fadeOut()效果會在fadeTo()效果完成時立刻開始,
不會等到width動畫完成

動畫的取消,延遲和佇列

stop(stopAll,goToEnd),
可選的 stopAll 引數規定是否應該清除動畫佇列。預設是 false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。
可選的 goToEnd 引數規定是否立即完成當前動畫。預設是 false。
因此,預設地,stop() 會清除在被選元素上指定的當前動畫。
delay(time,queueName):新增一個時間延遲到動畫佇列中,
//$(“img”).fadeTo(100,0.5).delay(200).slideUp();
//快速淡出為半透明,等一等,難後向上滑動
queue():???
jQuery佇列是按順序執行的函式列表.每一個佇列都與一個文件元素
關聯,每一個元素的佇列都與其他元素的佇列彼此獨立.當某個函式到達佇列頭部時,它會自動從佇列中去除並被呼叫,被呼叫時,this指向與佇列相關聯的元素.