title: Background color property slide up
body: <p>The question is in in transitionBackground function.  In this case, the function triggers when the up button is pressed on the page.</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Case: Background Transitions&lt;/title&gt;
      &lt;script src="jquery/jquery.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        $(
          var transitionBackground = function (){
            if ($(div).css("background") === "blue"){
              //convert to green by having the green background start at the bottom, 
              //and slide up (over say, a period of 1 second)
              //I'll up vote a pure-css, pure-js, or a jquery answer, 
              //but I prefer jquery or pure-css answers.
              //Thanks in advance.
            } else {
              //convert back to blue if pressed again.
              //you don't have to do this;
            }
          };
  
          var arrowDown = {left:false, right:false, up:false, down:false};
          var arrow = {left: 37, up: 38, right: 39, down: 40 };
  
          $(document.documentElement).keydown(function (e) {  //a key was clicked
            var keyCode = e.keyCode || e.which
  
            switch (e.keyCode) {
              case arrow.up:  //the up key was clicked/pressed
                if (arrowDown.up === false){  //tell if clicked or pressed
                  transitionBackground();
                }
                arrowDown.up = true
                break;
              default: //other keys
                return true;
                break;
            }
            return false;  //stop default behavior
          });
  
          $(document.documentElement).keyup(function (e) { //a key was relased
            var keyCode = e.keyCode || e.which
  
            switch (e.keyCode) {
              case arrow.up:  //the up key was released
                arrowDown.left = false;
                break;
              default: //other keys
                return true;
                break;
            }
            return false; //stop default behavior
          });
        );
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div style="height: 3em; width: 3em; background:blue"&gt;&lt;/div&gt;
    &lt;/body&gt;
  </code></pre>