jQuery動畫可以用animte函式實現,該方法透過CSS樣式將元素從一個狀態改變為另一個狀態。
CSS屬性值是逐漸改變的,這樣就可以建立動畫效果。只有數字值可建立動畫,比如:
該函式的介面是:
如:
在jQuery 1.4.2中,預設提供了提供了兩種動畫補間效果, 線性和擺動運動曲線:但我們需要使用複雜一些的運動效果,比如讓元件按照雙曲線或拋物線運動趨勢改變時,這兩個函式就顯得明顯不夠了。不過這實現起來並不複雜,只需要按照相應的數學公式,新增自定義的easing補間動畫效果函式即可。比如,現在要讓網頁上的元件按照 y = x^4 的曲線運動,執行趨勢為先緩後急。jQuery1.4的linear和swing的動畫實現程式碼是這樣的,最新版的jQuery做了改進,只使用了一個引數p,但不容易看出各個引數的作用,因此這裡使用了一個比較原始版本。
jQuery.extend({
……
easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
});
jQuery動畫可以用animte函式實現,該方法透過CSS樣式將元素從一個狀態改變為另一個狀態。
animte函式CSS屬性值是逐漸改變的,這樣就可以建立動畫效果。只有數字值可建立動畫,比如:
$("#content").animate({height:"100px"});直接按F12,然後在console中複製上面程式碼即可執行。該函式的介面是:
$(selector).animate(styles,options)$(selector).animate(styles,speed,easing,callback)對於第一種介面 options 可能的值:speed - 設定動畫的速度easing - 規定要使用的 easing 函式callback - 規定動畫完成之後要執行的函式step - 規定動畫的每一步完成之後要執行的函式queue - 布林值。指示是否在效果佇列中放置動畫。如果為 false,則動畫將立即開始specialEasing - 來自 styles 引數的一個或多個 CSS 屬性的對映,以及它們的對應 easing 函式如:
$("#content").animate({height:"100px"}, "linear");easing函式在jQuery 1.4.2中,預設提供了提供了兩種動畫補間效果, 線性和擺動運動曲線:但我們需要使用複雜一些的運動效果,比如讓元件按照雙曲線或拋物線運動趨勢改變時,這兩個函式就顯得明顯不夠了。不過這實現起來並不複雜,只需要按照相應的數學公式,新增自定義的easing補間動畫效果函式即可。比如,現在要讓網頁上的元件按照 y = x^4 的曲線運動,執行趨勢為先緩後急。jQuery1.4的linear和swing的動畫實現程式碼是這樣的,最新版的jQuery做了改進,只使用了一個引數p,但不容易看出各個引數的作用,因此這裡使用了一個比較原始版本。
jQuery.extend({
……
easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
},
……
});