Jquery - 如何使用TweenMax进行快速的slideUp动画？

Question

我想使用lib“TweenMax”在JQuery中使用slideUp进行动画模拟。 不使用slideUp的问题是这个功能在iPad和iPhone中会变慢。

通过使用TweenMax，它比jQuery快20倍：D

任何人都知道这个lib有什么帮助吗？

Answer 1

要获得与jQuery slideUp（）类似的结果，您只需创建一个影响元素高度的TweenLite补间：

TweenLite.to（element，0.5，{height：0}）

这是一个代码集示例，可让您切换slideUp / slideDown功能。

http://codepen.io/GreenSock/pen/AzHmc

至于声明，GSAP的运行速度比jQuery快20倍，可以随意试用速度测试： http://www.greensock.com/js/speed.html

值得注意的是，在中度到重度压力下，性能提升最为明显。很可能对于单个补间，你不会注意到很大的差异。

Answer 2

极客大使的例子对我来说并不合适。我结束了动画底部，在-100％和0之间交替。

向上滑动：

TweenMax.to(element, 0.3, {bottom: 0});

然后退下来：

TweenMax.to(element, 0.3, { bottom: "-100%"});

Answer 3

首先，您应该下载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