Jquery旋转木马怪异动画

Question

当我试图将div中的图像转换为旋转木马时，Jquery中出现了奇怪的动画。这是代码-

$(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);
});
}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

因为这个部分-

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

发生在animation函数执行之后，它在转盘流中创建了一个停顿。

有人能告诉我怎样才能使旋转木马平稳吗？

这里有一个上面代码的小提琴-https://jsfiddle.net/qLtth77k/

PLUS：当有人悬停在任何图像上时，我希望转盘停止。

Answer 1

移除场景外的左侧元素也会移除其右侧边缘。你需要移动它，这样它的边缘也会离开场景。因此，将动画更改为... $first.animate({ 'margin-left': '-230px' }, ... 解决问题