|
|
| (같은 사용자의 중간 판 46개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| /* 이 자바스크립트 설정은 리버티 스킨을 사용하는 사용자에게 적용됩니다 */
| |
| $(document).ready(function() {
| |
| $('.mw-collapsible').click(function() {
| |
| var content = $(this).find('.mw-collapsible-content');
| |
| var currentHeight = content.height(); // 현재 높이
| |
| var targetHeight = content[0].scrollHeight; // 실제 내용의 높이
| |
|
| |
| if (currentHeight === 0) {
| |
| // 펼칠 때: 콘텐츠 높이를 0에서 실제 높이로 애니메이션
| |
| animateHeight(content, 0, targetHeight);
| |
| } else {
| |
| // 접을 때: 콘텐츠 높이를 실제 높이에서 0으로 애니메이션
| |
| animateHeight(content, currentHeight, 0);
| |
| }
| |
| });
| |
|
| |
|
| // 애니메이션 함수
| |
| function animateHeight(element, startHeight, endHeight) {
| |
| var startTime = null;
| |
| var duration = 500; // 애니메이션 지속 시간 (밀리초)
| |
|
| |
| function step(timestamp) {
| |
| if (!startTime) startTime = timestamp;
| |
| var progress = (timestamp - startTime) / duration;
| |
| if (progress < 1) {
| |
| var newHeight = startHeight + (endHeight - startHeight) * progress;
| |
| element.height(newHeight); // 새로운 높이 설정
| |
| requestAnimationFrame(step); // 계속 애니메이션
| |
| } else {
| |
| element.height(endHeight); // 마지막에 정확한 높이 설정
| |
| }
| |
| }
| |
| requestAnimationFrame(step); // 애니메이션 시작
| |
| }
| |
| });
| |