JS在屏幕上移动图像并在末尾加载另一个图像

Question

我正在从屏幕左右移动一个gif并再次返回。由于我想为正在运行的人设置动画，所以我总是需要在画面结束时更改画面。谁能帮我这个？

我是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

追加和删除的图像作为背景属性。

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