Necesito hacer estos dos efectos en mi código:
Los caballos en vez de desplazarse directamente 20px, se desplaza con un efecto animate.
Al llegar el primer caballo al extremo derecho de la pantalla, los otros desaparecen con un efecto.
Solo sé hacerlo con el 20px. ¿Podéis decirme cómo sería?
Lo estoy haciendo con librería de jQuery, no es nativo. Éste es mi código:
//Efecto para los caballos.
$(document).ready(function() {
$("div#carrera").fadeOut(0);
$("div#carrera").fadeIn(1000);
});
function jugar() {
var aleatorio = Math.floor(Math.random() * 7);
var pos = parseInt(document.getElementById("caballo" + aleatorio).style.left) + 20;
document.getElementById("caballo" + aleatorio).style.left = pos + "px";
if (pos >= window.innerWidth - 50) {
if (elegir.value == "caballo" + aleatorio) {
alert("El caballo ganador es: " + aleatorio + " ¡WINNER!");
aciertos.value = parseInt(aciertos.value) + 1;
} else {
alert("El caballo ganador es: " + aleatorio + " ¡LOSER!");
fallos.value = parseInt(fallos.value) + 1;
}
elegir.disabled = false;
boton.disabled = false;
} else
setTimeout(jugar, 10);
}
function comienzo() {
elegir.disabled = true;
boton.disabled = true;
resultado.innerHTML = "";
for (var i = 0; i < 7; i++)
document.getElementById("caballo" + i).style.left = "50px";
jugar();
}
function iniciar() {
for (var i = 0; i < 7; i++)
carrera.innerHTML += "<IMG id='caballo" + i + "' src='caballo" + i + ".png' style='position: absolute; left: 50px; top:" + parseInt(100 + i * 50) + "px;'>";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onLoad="iniciar()">
Aciertos: <input type="text" id="aciertos" value="0" readonly size="1"><br> Fallos: <input type="text" id="fallos" value="0" readonly size="1"><br><br> Elige apuesta:
<select id="elegir">
<option value='caballo0'>Caballo negro</option>
<option value='caballo1'>Caballo amarillo</option>
<option value='caballo2'>Caballo gris</option>
<option value='caballo3'>Caballo naranja</option>
<option value='caballo4'>Caballo rosa</option>
<option value='caballo5'>Caballo rojo</option>
<option value='caballo6'>Caballo verde</option>
</select>
<input type="button" id="boton" value="¡JUGAR!" onClick="comienzo()">
<div id="resultado"></div>
<div id="carrera"></div>
</body>
animate
pero la animación no se va a ver por lo que mencionaba en el otro comentario: le tendrías que poner un tiempo igual o menor que el deltimeout
que es menor que el tiempo de refresco de la pantalla. Aparte de eso, hacer que el resto de caballos desaparezca es sencillo porqueanimate
tiene una función que se llama al terminar la animación. ¿Qué problemas estás encontrando al usaranimate
?