Javascript JQuery:Gowalla是如何执行的'；s"；幻灯片“；效果如何？

如何在frontpage上执行幻灯片效果

---

什么JQuery效果可以模仿这种向下滑动效果的功能？

这个名字很贴切。

在JQuery中，您可以使用它来做类似的事情，但是Gowalla似乎使用了一种稍微不同的方法：

---

单个面板位于定期更改其位置的父面板内。也就是说，面板本身没有动画，甚至没有任何东西在改变大小：它只是在视口中移动所有面板。当它到达底部时，Gowalla页面就停止了-它实际上装载了足够的面板，可以滑动大约4分钟-不过在你的情况下，你可能想把面板从底部取下来，然后再推回到顶部，使其连续。

我认为他们所做的与nickf提到的类似。 要创建动画效果，我认为所做的只是对环绕其中面板的div容器的位置设置动画

因此，父面板将有一个仅适合6个面板的视口。 另一个div容器将包裹所有面板。使用jQuery.animate（）移动div的top position属性。每次迭代都会将div容器向下移动一个面板的高度（例如100px）

var numPanels=20；
var i=1；
var livePanel=setInterval（函数（）{
如果（i

---

这只是一个粗略的代码，我认为它可以如何工作。您还需要考虑在任何时候都将在视口中的面板数量，并从您想要的总“下移”数量中减去它，确切地说，在

numPanels

中，这就是为什么我要问如何使用JQuery实现这一点。简单地使用SlideDown效果并不能实现GoWalla所做的相同功能，因为它正在向下滑动所有内容。@JGreig-它正在设置

底部

属性的动画，每5秒将其减少81像素。查看jQuery函数

animate（）

和内置函数

setInterval

。剩下的是CSS。@Dav，SlideDown效果不能实现与GoWalla相同的功能。请参阅下面的@nickf response，了解其原因。实际上，如果您意识到在现有元素上方的新元素上调用slidedown会将现有元素向下推，那么它可以。如果你想从字面上准确地复制它，那么不，它不是向下滑动的，但是你可以有效地完成同样的事情；再次启动。但是，如果“实时”流再次重复，那么它将无法实现其目的。哈哈。不过，您可以通过ajax加载一个新集合。。。

var numPanels = 20;
var i = 1;

var livePanel = setInterval(function() {
  if (i < numPanels) {
    $('div.wrap').animate({'top': '+100px'}, 500, 'swing');
    i++;
  } else {
    livePanel.clearInterval();
  }
}, 1000);