jQuery 상자 높이 문제 - slideUp/Down 사용

Question

내 사이트에서 버튼을 클릭하면 상자가 위로 움직이고 새로운 텍스트가로드 된 다음 아래로 내려 새로운 텍스트가 표시됩니다.

$("#generate").click(function(){ 
    var $target = $("#lyric"); 
    $target.slideUp(); 
    $target.queue(function(){ 
     $("#generate").text('Loading...'); 
     $target.load('lyrics.php', function(){ 
      $("#generate").text('Get another lyric'); 
      $target.dequeue(); 
     }); 
    }); 
    $target.slideDown(); 
}); 

문제는 그것이 위로 미끄러되면 새 텍스트가 짧거나 긴 될 수 있기 때문에 상자가 높이를 변경한다는 것입니다 : 여기에 내가 jQuery를에 대한 쓴 코드입니다. 즉, 상자가 아래로 미끄러지면 상자의 새 높이까지 상자의 '오래된'높이가되면 바보가 움직입니다.

<div id="lyric"> 
<div> 
<p class="quote">Come ride with me, through the veins of history, I'll show you how god, falls asleep on the job</p> 
<p><span class="artist"> - Muse, </span><span class="song">Knights Of Cydonia</span></p> 
</div> 
</div> 

그리고 CSS : 내가 일 처리 시도

#lyric div { 
    padding: 18px 0; 
} 
p.quote { 
    border-left: 2px solid rgb(100, 130, 130); 
    font-style: italic; 
    padding-left: 16px; 
    padding-top: 0; 
} 
.artist { 
    color: #E8E8E8; 
    font-weight: bold; 
} 

여기

는 HTML의 예입니다, 모든 내부 '가사'는 'lyric.php'파일에 의해 말다툼 주위에 사용자 지정 애니메이션이 있지만 slideUp/Down을 모방하지 못했고 상자 높이 문제를 정렬 할 수 없었습니다. 어떤 도움이라도 대단히 감사합니다.

Answer 1

나는이 테스트를하지 않은,하지만 손 떨어져 나는 당신이 당신의 부하 성공 함수 내에서 귀하의 slideDown()을 넣어해야한다고 생각 말하고 싶지만 :

$("#generate").click(function(){ 
    var $target = $("#lyric"); 
    $target.slideUp(); 
    $target.queue(function(){ 
     $("#generate").text('Loading...'); 
     $target.load('lyrics.php', function(){ 
      $("#generate").text('Get another lyric'); 
      $target.dequeue(); 
      $target.slideDown(); 
     }); 
    }); 
}); 

• 로딩이 완료 될 때까지 대기하는 방법 상자의 크기를 조정하기 전에 크기가 결정됩니다.