jquery - 使用 jquery 平滑滚动图像

Question

我正在使用 jQuery 制作 Logo slider 。我的第一个想法是使用由所有 Logo 组成的大型单个图像作为背景并为其位置设置动画。其背后的想法是通过仅加载单个文件来减少 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会被触发多次，所以...

jsBin demo

无需setInterval
当我们可以使用您的函数和动画回调创建循环时!

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

使用 .stop() 清除动画队列将使其(并不完美，但)好得多。