JS moving image across screen and loading another when at the end

I am moving a gif across the screen from left to right and back again. As I want to animate a running person, I need to change the picture always when it is at the end of the screen. Can anyone help me with this?

I am new to JS.

$(document).ready(function() {

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

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

#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>


append and remove image as background property.