jQuery Transit 過渡效果

jQuery Transit 使用 CSS3 的新特性來實現過渡效果，比默認的.animate方法要順暢得多。

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

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

• 版本：
• jQuery v1.4+
• jQuery Transit v0.9.12

• 為 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 Transit 過渡效果 基礎示例

使用方法

載入 JavaScript 文件

1. <script src='jquery.transit.js'></script>

復制

轉換屬性

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

1. $("#box").css({ x: '30px'});                        // 向右移動 
2. $("#box").css({ y: '60px'});                        // 向下移動 
3. $("#box").css({ translate: [60, 30]});              // 向右下移動 
4. $("#box").css({ rotate: '30deg'});                  // 順時針旋轉 
5. $("#box").css({ scale: 2});                         // 放大2倍 (200%) 
6. $("#box").css({ scale: [2, 1.5]});                  // 寬度和高度不同的放大 
7. $("#box").css({ skewX: '30deg'});                   // 水平斜切 
8. $("#box").css({ skewY: '30deg'});                   // 垂直斜切 
9. $("#box").css({ perspective: 100, rotateX: 30});    // Webkit 3d 旋轉 
10. $("#box").css({ rotateY: 30}); 
11. $("#box").css({ rotate3d: [1, 1, 0, 45]}); 

復制

支持相對值

1. $("#box").css({ rotate: '+=30' });        // 增加30度 
2. $("#box").css({ rotate: '-=30' });        // 減少30度 

復制

可以省略單位

1. $("#box").css({ x: '30px' }); 
2. $("#box").css({ x: 30 }); 

復制

多個值時，可以是數組或者用逗號分隔

1. $("#box").css({ translate: [60,30] }); 
2. $("#box").css({ translate: ['60px','30px'] }); 
3. $("#box").css({ translate: '60px,30px' }); 

復制

支持獲取屬性值（若屬性有多個值，則返回數組）

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

復制

動畫效果 - $.fn.transition

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

復制

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

1. $("#box").transition({ opacity: 0.1, scale: 0.3 }); 
2. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                             // 動畫時長 
3. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 'swing');                         // 緩動效果 
4. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear');                   // 動畫時長 + 緩動效果 
5. $("#box").transition({ opacity: 0.1, scale: 0.3 }, function(){});                    // 回調函數 
6. $("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear', function(){});     // 任意 

復制

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

1. $("#box").transition({ 
2.   opacity: 0.1, scale: 0.3, 
3.   duration: 500, 
4.   easing: 'linear', 
5.   complete: function(){} 
6. });

復制

---

下載