JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<table>
    <tr>
        <td></td><td><button id="up">Up</button></td>
    </tr>
    <tr>
        <td><button id="left">Left</button></td><td></td><td><button id="right">Right</button></td>
    </tr>
    <tr>
        <td></td><td><button id="down">Down</button></td>
    </tr>
</table>
<div id="char"></div>

CSS

td {
    text-align:center;                    
}

#char {
    background:url(http://diy-code.com/char/down.png);
    width:16px;
    height:22px;
    position:relative;
    top:10px;
    left:10px;
}

JavaScript

$('#up').click(function(){
    $('#char').stop().animate({'top':'-=10px'},'slow');
    $('#char').css({'background':'url(http://diy-code.com/char/up.png)'});            
});

$('#down').click(function(){
    $('#char').stop().animate({'top':'+=10px'},'slow');  
    $('#char').css({'background':'url(http://diy-code.com/char/down.png)'});     
});

$('#left').click(function(){
    $('#char').stop().animate({'left':'-=10px'});     
    $('#char').css({'background':'url(http://diy-code.com/char/left.png)'});     
});

$('#right').click(function(){
    $('#char').stop().animate({'left':'+=10px'});        
    $('#char').css({'background':'url(http://diy-code.com/char/right.png)'});     
});