要创建带有从左到右动画的幻灯片放映吗？

Question

I have the following code

 $(function(){ setInterval(function () { $('#slider').animate({left: 0}, 500, function () { $('#slider img:first-child').appendTo('#slider'); $('#slider img').css('left', ''); }); }, 1000); }); 

 #slider { position: relative; overflow: hidden; margin: 20px auto; width: 500px; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="slider"> <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg"></img> <img src="http://www.gettyimages.in/CMS/Pages/RoyaltyFree/StaticContent/109720793.jpg"></img> <img src="http://www.gettyimages.in/CMS/Pages/RoyaltyFree/StaticContent/108114205.jpg"></img> </div> 

Images are switched but not sliding they just replace each other. What am I doing wrong?

Answer 1

replace this line

$('#slider img').css('left', '');

with this

$('#slider').css('left', '0');

fiddle here : https://jsfiddle.net/nu5j2dyr/

another fiddle for sliding anmation: https://jsfiddle.net/88u56y9h/1/