[jQuery] Background position change repeatedly on keypress
Hi there! I have a background image I want to change position when I
press the arrow keys. I want the background to move 16 pixels for
every press in the direction I indicate. I can't get this to work,
however. I have jquery installed, as well as the background-position
plugin. Here's my code:
$(document).ready(function() {
function checkKey(e){
switch (e.keyCode) {
case 40:
var curX = parseInt($(".test").css("top"));
$(".test").css("top", curX += 16);
// move background
$("#background").css('backgroundPosition', bgCurX -= 16);
break;
case 38:
var curX = parseInt($(".test").css("top"));
$(".test").css("top", curX -= 16);
// move background
var bgCurX = parseInt($("#background").css("top"));
$("#background").css("top", bgCurX += 16);
break;
case 37:
var curX = parseInt($(".test").css("left"));
$(".test").css("left", curX -= 16);
// move background
var bgCurX = parseInt($("#background").css("left"));
$("#background").css("left", bgCurX += 16);
break;
case 39:
var curX = parseInt($(".test").css("left"));
$(".test").css("left", curX += 16);
// move background
var bgCurX = parseInt($("#background").css("left"));
$("#background").css("left", bgCurX -= 16);
break;
default:
}
}
if ($.browser.mozilla) {
$(document).keypress (checkKey);
} else {
$(document).keydown (checkKey);
}
});
CSS:
#background {height:600px;width:1000px;border:1px solid
#999;background-image:url("earthbound-bg.gif");background-repeat:no-
repeat;}
On the site, I have it so divs move when I press the arrow keys. That
works, but the background doesn't. :( Any help would be appreciated!
Thanks!