0

我目前正在探索 scrollorama jquery 插件（http://johnpolacek.github.io/scrollorama/）

到目前为止一切都很好，这是一个很好的插件，但它不能满足我的确切需求。因为这是我的想法：当访问者滚动到某个 div 时（假设我们得到了下一个值：blockIndex = 1），我希望顶栏动画。但我真正能用 scrollorama 找到的只是让位于我们刚刚滚动到的 div 中的东西发生。

我想我有一个简单的解决方法（其中 var I = 当前块索引号），方法是： if (i != '1') { $( ".top" ).animate({opacity: 0.25,left: "+= 50",height: "toggle"}, 5000, function() {}); };

它没有显示任何结果，我也没有在互联网上找到任何解决方案。那么我基本上在寻找什么？一个有或没有scrollorama（会很棒）的解决方案，我可以跟踪当前的bloxindex 编号并使用它为网站内的其他元素设置动画。

我不确定这是否有效，但我希望能找到答案！

干杯，

瑞克

4

1 回答 1

0

嘿 Rick 我遇到了同样的问题，有一个简单的方法可以解决这个问题，但这不是 scrollorama 问题。我还建议使用http://johnpolacek.github.io/superscrollorama/代替，因为它更新了一些。

无论好坏，Greensock 都会将您的 jquery 操作范围限制在用于动画的 $this 参数的范围内，以防止出现问题。有一种方法可以通过设置您正在调用的函数的范围来解决这个问题。

我通过将我的 jquery 这个元素的范围设置为页面的不同部分来解决这个问题。在我的示例中，我使用了与补间相同的位置，但实际上您可以将范围设置为任何有效的 jquery 选择器。您需要确保您使用的是最新的 greensock 插件。其他文档可以在http://api.greensock.com/js/找到

var timeLine1 = new TimelineLite({align: "sequence"})
.append([TweenMax.to($('#display-platform-list .frame-1'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-1')})])
.append([TweenMax.to($('#display-platform-list .frame-2'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-2')})])
.append([TweenMax.to($('#display-platform-list .frame-3'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-3')})])
.append([TweenMax.to($('#display-platform-list .frame-4'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-4')})])
.append([TweenMax.to($('#display-platform-list .frame-5'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-5')})])
.append([TweenMax.fromTo( $('#platform .callout'), 1, {css:{opacity: 1}}, {css:{opacity: 0}})]);

function removeSiblings(){
    $(this).siblings().hide();
}
于 2013-10-23T20:37:30.583 回答