2011-04-29 37 views
2

匹配其新的内容,我有一个包含问题滑动一个div最多使用jQuery

问题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(); - >只是一个更新测验分数的函数。

回答

3

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

请注意,可以控制动画,例如,$(容器).animate({高度: '24像素'},2000)的速度;会使它持续两秒钟。 – 2011-04-29 18:47:37

+0

非常感谢!点给你!我在此认为这个问题......答案! – FreeSnow 2011-04-29 18:55:56