JS déplacer une image sur l'écran et en charger une autre à la fin

Question

Je déplace un gif sur l'écran de gauche à droite et vice versa. Comme je veux animer une personne en cours d'exécution, je dois toujours changer l'image quand elle est à la fin de l'écran. Est-ce que quelqu'un peut m'aider avec ça?

Je suis nouveau chez JS.

$(document).ready(function() { 
 

 
function runningLeft() { 
 
    $("#run").animate({left: "-=300"}, 1500, "swing", runningRight); 
 
} 
 

 
function runningRight() { 
 
    $("#run").animate({left: "+=300"}, 1500, "swing", runningLeft); 
 
} 
 

 
runningRight();});

#run {position:absolute;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="run"><img src="https://media.giphy.com/media/vMIQqpANOmAaQ/giphy.gif"/></div>

BR Seb

Answer 1

append et retirer l'image en tant que propriété d'arrière-plan.

$(document).ready(function() { 
 

 
var imageUrl1 = "image 1 URL"; 
 

 
var imageUrl2 = "Image 2 URL"; 
 

 
function runningLeft() { 
 
$("#run").css("background",""); 
 
    $("#run").css("background",function(){ 
 
    return "url("+imageUrl1+") center top no-repeat"; 
 
}); 
 
    $("#run").animate({left: "-=300"}, 1500, "swing", runningRight); 
 
} 
 

 
function runningRight() { 
 
$("#run").css("background",""); 
 
    $("#run").css("background",function(){ 
 
    return "url("+imageUrl2+") center top no-repeat"; 
 
}); 
 
    $("#run").animate({left: "+=300"}, 1500, "swing", runningLeft); 
 
} 
 

 
runningRight(); 
 
});

#run {position:absolute;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="run"></div>