我想使用lib「TweenMax」在jQuery中做一個類似於動畫的slideUp功能。 不使用slideUp的問題是,此功能在iPad和iPhone上變慢。Jquery - 如何使用TweenMax做快速上推動畫?
通過使用TweenMax它的20倍快比jQuery的:d
任何一個可以如何知道這LIB給我一些幫助做到這一點?
我想使用lib「TweenMax」在jQuery中做一個類似於動畫的slideUp功能。 不使用slideUp的問題是,此功能在iPad和iPhone上變慢。Jquery - 如何使用TweenMax做快速上推動畫?
通過使用TweenMax它的20倍快比jQuery的:d
任何一個可以如何知道這LIB給我一些幫助做到這一點?
得到類似的結果jQuery的效果基本show(),你可以創建一個TweenLite的補間影響你的元素的高度:
TweenLite.to(元素,0.5,{高度:0})
以下是一個codepen示例,可讓您切換slideUp/slideDown功能。
http://codepen.io/GreenSock/pen/AzHmc
至於索賠,這GSAP的運行速度比jQuery的快20倍隨時與速度測試實驗: http://www.greensock.com/js/speed.html
其重要的要注意的是性能提升最爲明顯下適度嚴重的壓力。它很可能對於單個補間來說,你不會注意到很大的區別。
極客大使的例子並不適合我。我結束了動畫底部相反,-100和0
向上滑動之間交替%:
TweenMax.to(element, 0.3, {bottom: 0});
和退縮:
TweenMax.to(element, 0.3, { bottom: "-100%"});
首先,你應該下載TweenMax.min.js和jquery.gsap.min.js 你可以在這裏找到他們: http://greensock.com/products/
只是這些文件添加到您的腳本
SRC = 「JS/TweenMax.min.js」
SRC = 「JS/jquery.gsap.min.js」
然後,以動畫的東西,你可以使用定期jQuery.animate()方法
你可以看到更多的細節在這裏: http://greensock.com/jquery-gsap-plugin
好你爲例,但我想,盒子不是固定的高度? – kach 2013-05-08 14:17:22
或者首先隱藏盒子,點擊後顯示? – kach 2013-05-08 14:24:43
這是一個修訂版,具有以下功能: 1)最初隱藏 2)不依賴於固定高度 http://codepen.io/GreenSock/pen/brkpB – 2013-05-08 23:54:44