滑动一个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(); 
}