I am currently facing an issue in my code where I am trying to make one image fade in next to another, regardless of the position of the movable image on the screen. The movable image can be controlled using arrow keys, and when I move it across the screen and spawn the other image with the spacebar, it does not appear as intended. I am unsure whether the problem lies within my style code or jQuery implementation.
Any assistance would be greatly appreciated at your earliest convenience.
jQuery:
$(document).ready(function() {
$('#poop').hide()
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
case 37:
$('#ballmer').animate({left: "-=50px"}, 'fast');
break;
case 38:
$('#ballmer').animate({top: "-=50px"}, 'fast');
break;
case 39:
$('#ballmer').animate({left: "+=50px"}, 'fast');
break;
case 40:
$('#ballmer').animate({top: "+=50px"}, 'fast');
break;
case 32:
$('#poop').fadeIn('fast')
}
});
});
CSS:
#ballmer{
width:200px;
position:absolute;
margin:0 auto;
padding:0;
border-radius:5px;
}
#poop{
position:relative;
overflow:visible;
}