首頁>Club>
7
回覆列表
  • 1 # IT程式設計師碼農技術文摘

    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;

    }

    },

    ……

    });

  • 中秋節和大豐收的關聯?
  • 22歲順治皇帝去世以後,為何傳位給了排行老三的康熙?