Jquery Animation Left to right not working

Question

Why is this not working? This should be animate the arrow from left to right and then back to left again and so on, but this is not working. Why is that?

function moveRight(){
    $('#myIcon').animate({left: "+=50"}, 1000, function(){
        $('#myIcon').animate({left: "-=50"}, 1000, moveRight)
    })
}
moveRight();

a{
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn btn-danger btn-lg">
<span id="myIcon">←</span>&nbsp; Go Back
</a>

Answer 1

Add style position:absolute to the icon

function moveRight(){
    $('#myIcon').animate({left: "+=50"}, 1000, function(){
        $('#myIcon').animate({left: "-=50"}, 1000, moveRight)
    })
}
moveRight();

a{
  text-decoration: none;
}

#myIcon{
 position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn btn-danger btn-lg">
<span id="myIcon">←</span>&nbsp; Go Back
</a>