问JQuery: Gowalla是如何实现它的“滑动”效果的？

EN

在jQuery中，你可以只使用slideDown来做类似的事情，但是Gowalla似乎使用了稍微不同的方法：

各个面板位于一个父面板内，该父面板会定期更改其位置。也就是说，面板本身不是动画，甚至大小也不会改变:它只是在视口中移动所有面板。当它到达底部时，Gowalla页面就会停止-它实际上加载了大约4分钟的滑动面板-尽管在你的例子中，你可能想要把面板从底部取下来，并将它们推回顶部，以使其连续。

名字恰如其分的slideDown()。

我认为他们正在做的事情和尼克夫提到的很相似。要创建动画效果，我认为所要做的就是使围绕其中面板的div容器的位置具有动画效果。

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

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);

这只是我认为它是如何工作的一个粗略的代码。您还需要考虑任何时候视口中的面板数量，并在numPanels中从所需的“下移”总数中减去该数量。