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セブ

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>