JQuery: Как Gowalla выполняет эффект «слайда»?

Question

Как Gowalla.com выполнить эффект слайда на главной странице?

Какой эффект JQuery может имитировать эту функциональность эффекта скольжения?

Answer 1

Точно названный slideDown().

Answer 2

В JQuery, вы можете просто использовать slideDown сделать что-то подобное, однако Gowalla, кажется, использует немного другой метод:

Отдельные панели находятся внутри родительской панели, которая периодически меняет его положение. То есть сами панели не оживляют, и ничто даже не меняет размер: он просто перемещает все панели через окно просмотра. Когда он достигает дна, страница Gowalla просто останавливается - на самом деле она набирает достаточное количество панелей в течение примерно 4 минут скольжения - хотя в вашем случае вы можете снять панели со дна и оттолкнуть их назад, чтобы сделать его непрерывным ,

Answer 3

Я думаю, что то, что они делают, похоже на то, что упоминалось никчем. Чтобы создать эффект анимации, я думаю, что все, что сделано, - это анимировать положение контейнера div, который обтекает панели внутри.

Таким образом, родительская панель будет иметь окно просмотра, которое подходит только для 6 панелей. Другой контейнер контейнера обернется вокруг всех панелей. Используйте jQuery .animate() для смещения атрибута верхней позиции div. Каждая итерация сдвигает контейнер div вниз на высоту панели (например, 100 пикселей).

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.