Question

所以我在我的网站上制作这个幻灯片。现在它将屏幕外的所有图片向左移动，将第一个项目添加到容器的末尾，然后重复。问题是我必须设置一个大于动画时间的计时器，否则它会每隔一段时间为错误的元素设置动画。当appendTo函数完成而没有延迟时，如何重复它？

它看起来像什么：https://gyazo.com/04b427117ee9d01f65fcdba790ec0730

Javascript：

$(function(){
setInterval(function(){
    var p = $(".photo-grid-slideshow .photo-crop").css('width');
    $(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: '-=' + p}, 3000, "linear", function(){
        $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
    })
}, 3500);
});

Answer 1

在.appendTo：

之后再次运行它

$(function(){
  function animate(){
      var p = $(".photo-grid-slideshow .photo-crop").css('width');
      $(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: '-=' + p}, 3000, "linear", function(){
        $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
        animate(); // here we call it again
    })
  }
  animate(); // start animation
})

Answer 2

对于像这样的用例链接动画，使用像GreenSock这样的库可能会非常有用。另外一个好处是动画将比使用jQuery的原生动画功能更顺畅，更可定制。

对于您当前的实现，如果您包含与脚本一起使用的HTML和CSS片段，则会更容易提供帮助。

回调后无延迟地重复功能（Jquery）

2 个答案: