常用jquery記錄

1.jquery easing

jquery easing是一款比較老的jquery外掛程式，在很多**都有應用，尤其是在一些頁面滾動、幻燈片切換等場景應用比較多。它非常小巧，且有多種動畫方案供選擇，使用簡單，而且免費。

引入easing js檔案

該外掛程式基於jquery，所以需要同時引入jquery庫檔案和easing js檔案。

使用jquery easing

jquery easing是在jquery原有的動畫效果上進行了擴充套件，所以使用時可以根據jquery原有的動畫函式進行擴充套件。

1.jquery預設動畫

支援toggle()、slideup()、slidedown()、show()、hide()等jquery內建的動畫效果，使用**如下：

$(element).slideup(
);

引數duration：定義動畫運動時間，毫秒，其實就是速度，時間越短，運動速度越快。

引數easing：指定動畫效果，easing js提供多種動畫效果，有勻速運動、變加速運動、緩衝波動效果，它們是：linear，swing，jswing，easeinquad，easeoutquad，easeinoutquad，easeincubic， easeoutcubic，easeinoutcubic，easeinquart，easeoutquart，easeinoutquart， easeinquint，easeoutquint，easeinoutquint，easeinsine，easeoutsine， easeinoutsine，easeinexpo，easeoutexpo，easeinoutexpo，easeincirc， easeoutcirc，easeinoutcirc，easeinelastic，easeoutelastic，easeinoutelastic， easeinback，easeoutback，easeinoutback，easeinbounce，easeoutbounce，easeinoutbounce.各動畫實際效果請參照演示demo。

引數complete：動畫結束後**函式callback，可以自定義動畫結束後的呼叫函式。

2.使用jquery自定義動畫函式animate()

jquery easing結合jquery的自定義動畫函式animate()可以製作各種你想要的動畫效果，使用**如下：

$(element).animate(
,);

上面的**定義了乙個緩衝效果的動畫，我們可以根據專案需要，結合jquery easing製作各種動畫效果。

2.jquery.mousewheel.js

jquery mousewheel plugin,用於新增跨瀏覽器的滑鼠滾輪支援。

mousewheel事件的處理函式有一點小小的變化，它除了第乙個引數event 外，還接收到第二個引數delta。

通過引數delta可以獲取滑鼠滾輪的方向和速度。

如果delta的值是負的即-1，那麼滾輪就是向下滾動，正的1就是向上。

js**12

3456

78910

1112

// using bind

$('#my_elem').bind('mousewheel',function(event, delta, deltax, deltay)

});

// using the event helper

$('#my_elem').mousewheel(function(event, delta, deltax, deltay)

});

3.jquery.transit.js

jquery transit 使用 css3 的新特性來實現過渡效果，比預設的.animate方法要順暢得多。

因為使用 css3 進行過渡效果，所以對不支援 css3 的瀏覽器效果有所下降。

語法和.animate方法相同，因此很好上手。

為 jquery 的 .css 方法支援以下屬性：

x (px)

y (px)

translate (x, y)

rotate (deg)

rotatex (deg)

rotatey (deg)

rotate3d (x, y, z, deg)

scale (x, [y])

perspective (px)

skewx (deg)

skewy (deg)

ps：對於使用連線符的屬性需改為駝峰式寫法，或者使用引號包括。如：padding-top屬性需寫為：paddingtop或者"padding-top"

版本：jquery v1.4+jquery transit v0.9.12

除 jquery 原本支援的屬性外，還新支援一些屬性（使用.css方法不會進行動畫效果，只是直接改變值）

$("#box").css();                        // 向右移動
$("#box").css(); // 向下移動
$("#box").css(); // 向右下移動
$("#box").css(); // 順時針旋轉
$("#box").css(); // 放大2倍 (200%)
$("#box").css(); // 寬度和高度不同的放大
$("#box").css(); // 水平斜切
$("#box").css(); // 垂直斜切
$("#box").css(); // webkit 3d 旋轉
$("#box").css();
$("#box").css();

$("#box").css();        // 增加30度
$("#box").css(); // 減少30度

$("#box").css();
$("#box").css();

$("#box").css();
$("#box").css();
$("#box").css();

$("#box").css('rotate');     //=> "30deg"
$("#box").css('translate'); //=> ['60px', '30px']

$('...').transition(options, [duration], [easing], [complete])

你可以使用$.fn.transition()來進行 css3 動畫效果。他和$.fn.animate()的效果一樣，只是他使用了 css3 過渡。

$("#box").transition();
$("#box").transition(, 500); // 動畫時長
$("#box").transition(, 'swing'); // 緩動效果
$("#box").transition(, 500, 'linear'); // 動畫時長 + 緩動效果
$("#box").transition(, function(){}); // **函式
$("#box").transition(, 500, 'linear', function(){}); // 任意

也可以在引數中配置所有選項

$("#box").transition(
});

作者**：

github

中文文件

授權協議：

mit4.例項分析

故宮博物院 -->瀏覽建議：

常用jquery記錄

Jquery 常用函式學習記錄

jQuery使用記錄

jquery常用與易忘知識點記錄

常用jquery記錄

Jquery 常用函式學習記錄

jQuery使用記錄

jquery常用與易忘知識點記錄

相關推薦