创建jQuery无限循环的项目

Question

我正在尝试在1个主要div中完成无限循环的项目。 想法是显示部分项目，然后将左侧的项目滑动到屏幕外部，而另一个项目则从屏幕右侧添加。 以下函数正在运行，但animate方法不起作用，它只是在不动画的情况下更改css。

我做错了吗？

也欢迎任何更好的方法。我试图搜索jQuery解决方案，但它们对我不起作用，所以我想创建另一个。

jQuery(document).ready(function() {
var items = jQuery('.companies-logos div');
var temp;
var item_width = 0;

if(items.length > 9) {
  items.slice(9).remove();
  setInterval(function(){
    jQuery('.companies-logos').append(items[9]);
    items[9].style.marginLeft = '0';
    item_width = items[0].offsetWidth + 12.5;
    jQuery(items[0]).animate({marginLeft: '-' + item_width + 'px'}, 2000);
    // items[0].style.marginLeft = '-' + item_width + 'px';
    temp = items[0];
    jQuery(items[0]).remove();
    items.splice(0, 1);
    items.push(temp);
    // jQuery(items[items.length-1]).css('transition', 'all 2500ms');
    }, 2500);
  }
});

Answer 1

对于那些有兴趣从上面获得想要结果的人：

$(function(){  
  setInterval(function(){  
    var item_width = $('.companies-logos ul li:first-child').width() + 25;
    $(".companies-logos ul li:first-child").animate({"margin-left": -item_width}, 1500, function(){  
      $(this).css("margin-left",25).appendTo(".companies-logos ul");  
    });  
  }, 2000);  
});