javascript - 向上滑动div以使其与jQuery匹配新内容

我有一个包含问题的div


  问题2：
          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调整大小是因为其内容不同（不再是一个长问题，只是一个简短的答复）。是否可以在此处替换某些东西以使其向上滑动而不是仅弹出呢？

我提供的功能仅供参考：


  bttn->按下的按钮。 （A，B，C或D）
  
  c->如果答案正确
  
  questionId->用于获取有关问题的数据。
  
  updateScore（）; ->只是一个更新测验分数的功能。

最佳答案

该解决方案使用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();
}

关于javascript - 向上滑动div以使其与jQuery匹配新内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5835735/