Question

我正在使用jQuery制作徽标滑块。我的第一个想法是使用一个大的单个图像，该图像由作为背景放置的所有徽标组成，并为其位置设置动画。这背后的想法是通过仅加载单个文件来减少http请求。

jQuery代码是这样的：

<script>
  $(function(){
    var current = 0;
    function bgscroll(){
      // 20 pixel row at a time
      current -= 20;
      // move the background with backgrond-position css properties
      $('#slider').animate({'background-position' : current+'px'}, 100, 'linear');}
      setInterval(bgscroll, 1);
    });
</script>

然而动画有问题。它闪烁，而且不顺畅。所以任何人都有任何想法如何让这个动画更流畅？

当前CSS

#slider{
  height: 97px;
  overflow: hidden;
  background-image: url("../img/logos-long.jpg");
  background-repeat: repeat-x;
  width: 100%;
}

Answer 1

在您的示例中，interval在一个animation周期结束前被触发更多次，所以......

jsBin demo

不需要setInterval
当我们可以使用你的函数和动画回调创建循环时！

$(function(){
  function bgscroll(){
    $('#slider').stop().animate({'background-position':'-=1000'},10000,'linear',bgscroll);
  }
  bgscroll(); // initiate!!
});

使用.stop()清除动画队列会使它（不完美但是）更好，更好。

Answer 2

您的超时似乎比每个动画周期完成的执行速度更快。如果你将超时延迟增加到100毫秒，我会认为闪烁会停止。

用jquery平滑滚动图像

2 个答案:

jsBin demo