The question is in in transitionBackground function. In this case, the function triggers when the up button is pressed on the page.
<html>
<head>
<title>Case: Background Transitions</title>
<script src="jquery/jquery.js"></script>
<script>
$(
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
});
);
</script>
</head>
<body>
<div style="height: 3em; width: 3em; background:blue"></div>
</body>
Here’s an example using the toggle function with two divs: http://jsfiddle.net/SmAHU/ (loosely based on Nick011’s reply)