JQuery：Gowallaはどのように "スライド"効果を出すのですか？ - javascript、jquery

どうやって Gowalla.com フロントページでスライド効果を実行しますか？

スライドダウン効果の機能を模倣できるJQuery効果は何ですか？

回答：

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.