necesito ayuda porque quiero que cuando el left de un elemento html (una img) de una gallina (chicken 1) llegue al width del body, esta desaparezca y empiece a desplazarse la chicken 2. El problema que tengo es que cuando la gallina 1 llega al width del body sí desaparece pero asi tambien la gallina 2, creo que porque directamente empieza con un left mayor que al width del body. Agradeceria si alguien puede ayudarme con esto. JS:
var body = document.body
document.addEventListener('DOMContentLoaded', function() {
var chicken = document.getElementById('gallina');
var chicken2 = document.getElementById('gallina2');
let start = Date.now(); // recordar la hora de inicio
let timer = setInterval(function() {
// ¿Cuánto tiempo ha pasado desde el principio?
var timePassed = Date.now() - start - 1500;
//console.log(timePassed)
// dibujar la animación en el momento timePassed
drawChicken1(timePassed);
//condicional
var leftChicken = (chicken.style.left).replace("px","")
leftChicken === body.clientWidth ? timePassed=0 : timePassed
if (leftChicken > body.clientWidth) {
chicken.style.display = 'none';
//var timePassed2 = (timePassed - (Date.now() - start - 1500)) clearInterval(timer); el timer vuelve a cero
console.log("estoy en el if")
setInterval2(timePassed)
if (chicken2.style.left > body.clientWidth + 'px') {
chicken2.style.display = 'none';
clearInterval(timer);
}
}
}, 20);
function setInterval2(timePassed){
let timer2 = setInterval(function(){
let timePassed2 = timePassed
console.log("time passed 2 " + timePassed2)
console.log('la gallina 2 está en: '+ timePassed2 / 5 + 'px')
console.log("")
drawChicken2Position(timePassed2);
}, 20)
}
function drawChicken1(timePassed) {
chicken.style.left = timePassed / 5 + 'px';
}
function drawChicken2Position(timePassed2) {
chicken2.style.left = timePassed2 / 5 + 'px';
}
});
CSS:
#gallina, #gallina2 {
position: relative;
cursor: pointer;
width: 5%;
transform: scaleX(-1);
}