$(document).ready(function() { console.log("ready"); $(document).on('keydown', function(e){ if(e.which == 37){ $("#move-left").attr('id','char-pants-left'); $("#char-arm-left-up").attr('id','char-arm-left'); $("#char-arm-right-up").attr('id','char-arm-right'); $("#char-container").css({ 'left': '-=2rem', }) $("#char-pants-left").attr('id','move-left'); $("#char-pupil-left").attr('id','char-pupil-left-move'); $("#char-pupil-right").attr('id','char-pupil-right-move'); $("#char-arm-left").attr('id','char-arm-left-up'); $("#char-arm-right").attr('id','char-arm-right-up'); } if(e.which == 38){ $("#char-arm-left-up").attr('id','char-arm-left'); $("#char-arm-right-up").attr('id','char-arm-right'); $("#char-container").css({ 'top': '-=2rem', }) $("#char-arm-left").attr('id','char-arm-left-up'); $("#char-arm-right").attr('id','char-arm-right-up'); } if(e.which == 39){ $("#move-right").attr('id','char-pants-right'); $("#char-arm-left-up").attr('id','char-arm-left'); $("#char-arm-right-up").attr('id','char-arm-right'); $("#char-container").css({ 'left': '+=2rem', }) $("#char-pants-right").attr('id','move-right'); $("#char-pupil-left-move").attr('id','char-pupil-left'); $("#char-pupil-right-move").attr('id','char-pupil-right'); $("#char-arm-left").attr('id','char-arm-left-up'); $("#char-arm-right").attr('id','char-arm-right-up'); } if(e.which == 40){ $("#char-arm-left-up").attr('id','char-arm-left'); $("#char-arm-right-up").attr('id','char-arm-right'); $("#char-container").css({ 'top': '+=2rem', }) $("#char-arm-left").attr('id','char-arm-left-up'); $("#char-arm-right").attr('id','char-arm-right-up'); } }) });