Jquery Carousel奇妙なアニメーション

Question

divの画像を回転台に変換しようとすると、Jqueryで奇妙なアニメーションが表示されます。

$first.remove().css({ 'margin-left': '0px' }); 
$('.slider img:last').after($first); 

の後に起こる - この部分があるので

<div class="slider" dir="ltr"> 
    <img src="http://via.placeholder.com/200x60"/> 
    <img src="http://via.placeholder.com/200x50"/> 
    <img src="http://via.placeholder.com/200x40"/> 
    <img src="http://via.placeholder.com/200x60"/> 
    <img src="http://via.placeholder.com/200x50"/> 
    <img src="http://via.placeholder.com/200x40"/> 
</div> 

JS

$(function(){ 
// vars for clients list carousel 
    // http://stackoverflow.com/questions/6759494/jquery-function-definition-in-a-carousel-script 
    var $clientcarousel = $('.slider'); 
    var clients = $clientcarousel.children().length; 
    var clientwidth = (clients * 200); // 140px width for each client item 
    $clientcarousel.css('width',clientwidth); 

    var rotating = true; 
    var clientspeed = 0; 

    seeclients = setInterval(rotateClients, clientspeed); 

    function rotateClients() { 
     if(rotating != false) { 
      var $first = $('.slider img:first'); 
      var $last = $('.slider img:last'); 
      $first.animate({ 'margin-left': '-200px' }, 2000, "linear", function() { 
       $first.remove().css({ 'margin-left': '0px' }); 
       $('.slider img:last').after($first); 
      }); 
     } 
    } 
}); 

HTML - ここ コードです関数が実行されると、カルーセルフローにスタッターが作成されます。

カルーセルを滑らかにするにはどうすればいいですか？ここで

は、上記のコードとフィドルある - https://jsfiddle.net/qLtth77k/

PLUS：私は誰かがいずれかの画像にカーソルを合わせると、カルーセルを停止したいです。

Answer 1

シーンの外にある左要素を削除すると、右余白も削除されます。あなたはそれを動かす必要があります、それはマージンが場面からも出てくることです。したがって、アニメーションを ... $first.animate({ 'margin-left': '-230px' }, ... に変更すると、問題は解決します。