title: show hide div based on input field
body: <p>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. </p>
  
  <p>I dont really know how to get both functions to happen, here is what I have so far</p>
  
  <p><a href="http://jsfiddle.net/bloodygeese/3XGGn/36/" rel="nofollow">http://jsfiddle.net/bloodygeese/3XGGn/36/</a></p>
  
  <pre><code> &lt;p&gt;What is 10 x 2 ?&lt;/p&gt;
  &lt;div id="correct"&gt;
  That's Correct!
  &lt;/div&gt;
  &lt;div id="incorrect"&gt;
  Sorry, Try again!
  &lt;/div&gt;
  &lt;input type='text' id="full_day"/&gt;
  &lt;input type='button' id="buttontest" value="clickme"/&gt;​
  
  
  
  $(document).ready(function(){
  $("#buttontest").click(function(){
  
      if ($('#full_day').val() == 20) {   
  
          $("#correct").show("fast"); //Slide Down Effect
      } 
      else {
          $("#correct").hide("fast");    //Slide Up Effect
      }
  });
  
  
  });​
  </code></pre>