title: .fadeIn works for button press, but not for keypress
body: <p>I have two divs and I'm trying to have only one div visible at a time.  When I press the 1 key, I want div1 to fadeIn (if it hasn't already), and for div2 to fadeOut (if it hasn't already).  Then if I press the 2 key, the opposite should happen; with div2 fading in and div1 fading out.  My code is below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
    $("#div2").fadeOut();
  });
  &lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  $(document).keydown(function(e){
      if (e.keyCode==49)
      $("#div2").fadeOut();
      $("#div1").fadeIn();
      });
      if (e.keyCode==50)
      $("#div1").fadeOut();
      $("#div2").fadeIn();
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Fade in div1 by pressing the 1 key.  Fade out div1 and fade in div 2 by pressing the 2 key.&lt;/h1&gt;
  &lt;div id="div1"&gt;1&lt;/div&gt;
  &lt;div id="div2"&gt;2&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This was working when I was using buttons, but not now for keypresses.  What am I doing wrong?</p>