jQuery - 위에서 아래로 간단한 애니메이션 높이가

Question

내 사이트에 검색 결과가 표시되는 사이드 바가 있습니다. 처음 20 개의 결과 만 표시하고 싶습니다. 그런 다음 "더보기"버튼이 있습니다. 해당 버튼을 클릭하면 전체 목록을 표시하려고합니다. http://jsfiddle.net/FCCGF/1/

내가 여기에 원하는 것은 :

는 지금 여기 내 코드의

• 페이지로드는 만 Test1을 보여

  .

• 당신이 클릭

  은 "더"나는 애니메이션은 위에서 아래로 시작

• 내가 원하는 (목록의 모든 옵션을 보여주기 위해) 할에 "더보기" 내 목록이 끝날 때까지 기다리십시오. 사용자가 다시 클릭하면 이전 위치로 돌아가고 싶습니다.

어떤 도움을 주시겠습니까?

Answer 1

당신이 정상을 업데이트 할 수 있습니다 및 marginTop가 아래로 슬라이딩 효과를 얻기 위해 애니메이션 :

$(document).ready(function() { 
    var totalSidebarHeight = $(".sidebar").height(); 
    var resultHidden = totalSidebarHeight - 20; 

    $(".topResultsArea").height(resultHidden); 

    $(".showMore").toggle(function(){ 
     $(".topResultsArea").animate({height:20, top:$(".sidebar").height(), marginTop:0},200); 

     },function(){ 
      $(".topResultsArea").animate({height:resultHidden, top:0, marginTop:40},200); 
     }); 

});​ 

업데이트 바이올린 : http://jsfiddle.net/johnkoer/FCCGF/18/