Question

I am trying to make a simple quiz with just one question,
I have got to the stage where if the correct answer is typed in then a “correct” message is shown, my problem is I also want to have an “incorrect” message display for 1 second then fade out if anything else is typed in the input field.

I dont really know how to get both functions to happen, here is what I have so far

http://jsfiddle.net/bloodygeese/3XGGn/36/

 <p>What is 10 x 2 ?</p>
<div id="correct">
That's Correct!
</div>
<div id="incorrect">
Sorry, Try again!
</div>
<input type='text' id="full_day"/>
<input type='button' id="buttontest" value="clickme"/>​



$(document).ready(function(){
$("#buttontest").click(function(){

    if ($('#full_day').val() == 20) {   

        $("#correct").show("fast"); //Slide Down Effect
    } 
    else {
        $("#correct").hide("fast");    //Slide Up Effect
    }
});


});​

Answer 1

Make it simple with only one line to add. In your else:

else {
     $("#incorrect").show("500").delay("1000").hide("500");
}

example: http://jsfiddle.net/3XGGn/39/

EDIT:

I see you already accepted the answer so it should be satisfactory, however, I noticed now that I misread your question.

[..] “incorrect” message display for 1 second then fade out if anything else is typed in the input field.

What I gave you fades away regardless of if anything is typed in the input field. I’ll provide you with the code for what you actually asked for and you can choose which one you want to use.

$("#buttontest").click(function(){

    if ($('#full_day').val() == 20) {   

        $("#correct").show("fast"); //Slide Down Effect
    } 
    else {
        $("#correct").hide("fast");    //Slide Up Effect
        $("#incorrect").show("500");
    }
});
$("#full_day").change(function() {
    $("#incorrect").hide("500");
});

Example fiddle