Question

我有一个包含问题的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 - ＆gt;按下的按钮。（A，B，C或D）

c - ＆gt;如果答案是正确的

questionId - ＆gt;用于获取有关问题的数据。

updateScore（）; - ＆GT;只是一个更新测验得分的功能。

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();
}

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

1 个答案: