JQuery : Gowalla는 "슬라이드"효과를 어떻게 내고 있습니까?

Question

Gowalla.com은 어떻게 FrontPage에서 슬라이드 효과를 수행합니까?

어떤 JQuery 효과가 슬라이딩 다운 효과의 기능을 모방 할 수 있습니까?

Answer 1

적절히 명명 된 slideDown().

각각의 패널은 주기적에게 위치를 변경하는 부모 패널 내부에 있습니다

Answer 2

jQuery를에서 방금 비슷한 뭔가를 slideDown을 사용할 수 있습니다, 그러나 왈라는 약간 다른 방법을 사용하는 것 같다. 즉, 패널 자체가 애니메이션으로 나타나지 않고 크기를 변경하는 것조차 없습니다. 뷰포트를 통해 모든 패널을 이동시키는 것입니다. 바닥에 도달하면 Gowalla 페이지가 멈 춥니 다. 실제로는 약 4 분 동안 슬라이딩 할 수있는 충분한 패널을로드합니다. - 경우에 따라, 패널을 맨 아래에서 맨 위로 가져 가면 연속으로 만들 수 있습니다. .

Answer 3

나는 그들이 닉이 말한 것과 비슷하다고 생각한다. 애니메이션 효과를 만들려면, 패널 내부를 둘러싸는 div 컨테이너의 위치를 ​​애니메이션으로 만드는 것이 전부라고 생각합니다.

따라서 부모 패널에는 6 개의 패널에만 맞는 뷰포트가 있습니다. 다른 div 컨테이너가 모든 패널을 둘러 쌀 것입니다. div의 최상위 위치 특성을 이동하려면 jQuery .animate()를 사용하십시오. 반복 할 때마다 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); 

이것이 작동하는 방법에 대한 대략적인 코드입니다. 또한 한 번에 뷰포트에 포함될 패널의 수를 고려해야하며, "shift down"의 총 수에서 이것을 빼십시오 (numPanels).