Superscrollorama Tweens用于多种元素

Question

这应该不会太复杂，尽管我一直在做这件事。我使用的是Superscrollorama，这是一个jQuery插件，当元素滚动到浏览器的中心时，动画就会出现。

如果我想要有两个元素，当它们到达页面不同区域的浏览器中间时，它们都会褪色，我需要在JavaScript中创建两个独立的补间。我不能让一个fade元素共享脚本中引用的类。这是因为一旦第一个淡入淡出元素被击中，它就会触发两个动画。下面是一小段代码，它不会像我想要的那样工作：

<!--HTML-->
<h2 class="fade-it">Fade It</h2>
<h2 class="fade-it">Fade It again</h2>

<!--JavaScript-->
var controller = $.superscrollorama();
controller.addTween('.fade-it', TweenMax.from( $('.fade-it'), .5, {css:{opacity: 0}}));

还有jsFiddle。抱歉，如果我没有正确解释它，这是一个有点困难的文字。这样做的主要目的是减少代码。任何帮助都将不胜感激！

Answer 1

你的答案就在你的描述中。你是对的:你不能让一个fade元素共享一个类而不触发这两个元素。给两个元素单独的id，并使用它们的id创建两个单独的补间，而不是共享的类。

Answer 2

使用两个单独的补间。这就是它的工作原理。