Jquery动画从左到右不起作用

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>