2012-03-23 3 views
0

this script을 사용하여 jQuery 아코디언을 만들었습니다. working jsFiddle here을 확인하십시오.세로 중심 jQuery 아코디언

아코디언을 페이지의 가운데에 세로로 배치하는 것을 제외하고는 효과가 있습니다. 아이디어는 아코디언의 높이가 변함에 따라 DIV이 지속적으로 수직 중심으로 재 배열된다는 것입니다. 아코디언은 페이지의 중심에서 확대되는 것처럼 보입니다.

답변

2

아코디언 컨테이너를 가운데 정렬 할 방법을 작성할 수 있으며 로직을 따라 슬라이딩 애니메이션이 완료 될 때마다이 메서드를 호출 할 수 있습니다.

function centerIt(){ 
    var $accordion = $('.accordion'); 
    $accordion.css('top', ($(window).height() - $accordion.height())/2); 
} 

근무 데모 - 그것은 조금 불안해하지만, 작동 http://jsfiddle.net/hDRMP/6/

+0

. 실제로'vertical-align' CSS를 사용하여 더 많은 성공을 거두었습니다. – colindunn

+0

@ShankarSangoli [긴 아코디언을 설명하기위한 작은 수정] (http://jsfiddle.net/hDRMP/17/). – Shef

+0

아코디언이 애니메이션을 끝내고 내용을 완전히 확장 할 때까지 기다려야하기 때문에 급격합니다. 다른 대안은 아코디언의 액티브 콘텐츠 창 높이를 알아야하는 아코디언 애니메이션과 함께 상단을 애니메이션으로 만드는 것입니다. – ShankarSangoli