JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div>Push!</div>
<img src="https://app.mobills.com.br/img/Login/casa.png" >
<button id="leftBtn" > < </button>
<button id="rightBtn"> > </button>
CSS
div {
background: #cfd;
margin: 3px;
width: 50px;
text-align: center;
float: left;
cursor: pointer;
border: 2px outset black;
font-weight: bolder;
}
img {
display: none;
width: 600px;
height: 400px
float: left;
margin: 10px;
}
button{
margin-left: 200px;
display: none;
width: 63px;
}
JavaScript
$(document).keydown(function(e) {
switch(e.which) {
case 37:
console.log("esquerda");
$("img").attr("src", "https://app.mobills.com.br/img/Login/motivacao.png");
break;
case 38:
console.log("cima");
$("img").attr("src", "https://app.mobills.com.br/img/Login/motivacao.png");
break;
case 39:
console.log("direita");
$("img").attr("src", "https://app.mobills.com.br/img/Login/casa.png");
break;
case 40:
console.log("baixo");
$("img").attr("src", "https://app.mobills.com.br/img/Login/casa.png");
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
$( "div" ).click(function() {
$( this ).css({
borderStyle: "inset",
cursor: "wait"
});
$( "img" ).slideDown( 1000, function() {
$( this )
.css( "border", "2px red inset" )
.filter( ".middle" )
.css( "background", "yellow" )
.focus();
$( "div" ).css( "visibility", "hidden" );
$("button").css("display", "block");
});
});
$("#leftBtn").on("click", function(){
$("img").attr("src", "https://app.mobills.com.br/img/Login/motivacao.png");
});
$("#rightBtn").on("click", function(){
$("img").attr("src", "https://app.mobills.com.br/img/Login/casa.png");
});