滑動一個div最多使用jQuery

Question

匹配其新的內容，我有一個包含問題

問題2一個div： 什麼是16的平方根是多少？

A. 7 
B. 5 
C. 4 
D. 1 

我需要它，所以當選擇一個答案的選擇，它向上滑動，並顯示：

QUESTION 2: Correct! (Or Incorrect!) 

我擁有這一切在這裏工作使用JavaScript：

function finalizeAnswer(bttn,c,questionId) { 
    if (c) { 
     bttn.parentNode.style.backgroundColor="lightgreen"; 
     bttn.parentNode.innerHTML="<b>QUESTION "+(questionId+1)+":</b> Correct!"; 
    } else { 
     bttn.parentNode.style.backgroundColor="pink"; 
     bttn.parentNode.innerHTML="<b>QUESTION "+(questionId+1)+":</b> Wrong!"; 
    } 
    updateScore(); 
} 

由於div的內容不同，div調整大小租金（不再是一個長期的問題，只是一個簡短的迴應）。是否有可能取代這裏的東西，使其滑動而不是彈出？

只是爲了對函數的引用我包括：

BTTN - >按下的按鈕。 （A，B，C，或d）

Ç - >如果答案是正確的

questionId - >用於獲取有關問題的數據。

updateScore（）; - >只是一個更新測驗分數的函數。

Answer 1

該解決方案使用jQuery爲高度變化設置動畫。

編輯：我已經更新了這個使用真正的新高度，而不是神奇的猜測在24px。

See Live Demo on jsFiddle

function displayResult(container, correct, questionId){ 

    // Keep up with the old height 
    var oldHeight = $(container).height(); 

    // Change the contents 
    $(container).css('background-color', correct == true ? 'lightgreen' : 'pink'); 
    $(container).html("<b>QUESTION " + (questionId+ 1) + ":</b> " + (correct == true ? "Correct!" : "Wrong!"));  

    // Capture the new height 
    var newHeight = $(container).height(); 

    // Jump back to the old height and then animate to the new 
    $(container).css('height', oldHeight); 
    $(container).animate({height:newHeight}); 
} 

function finalizeAnswer(bttn,c,questionId) { 
    displayResult(bttn.parentNode, c, questionId); 

    // I have commented out the call to updateScore since I don't have it 
    //updateScore(); 
}