JS Bewegt Bild über den Bildschirm und lädt einen anderen, wenn am Ende

Question

Ich verschiebe ein gif über den Bildschirm von links nach rechts und wieder zurück. Da ich eine laufende Person animieren möchte, muss ich das Bild immer ändern, wenn es am Ende des Bildschirms ist. Kann mir jemand dabei helfen?

Ich bin neu in 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 und entfernen Bild als Hintergrund-Eigenschaft.

$(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>