jQuery - 如何在宽度增加时设置宽度？

Question

我正在尝试使用以下代码来创建连续的动画，

var running = function() {
  w = jQuery('#belt').width();
  if(w >= 940)
    jQuery('#belt').width(0);

  jQuery('#belt').animate({width: '+=235px'}, duration, 'linear');
}

jQuery(document).everyTime(duration, running);

但它不起作用，宽度没有重置而是不断增加，我写错了吗？

Answer 1

您只需使用 complete 参数来实现 jQuery#animate() 定义动画完成时应执行的函数。添加一些递归，等等：

jQuery.fn.continuousAnimation = function() {
  var $this = this;
  return $this.animate({ 'width': '+=235px' }, 400, 'linear', function() {
    $this.width(0).continuousAnimation();
  });
};

jQuery('#belt').continuousAnimation();

演示：http://jsfiddle.net/mathias/dRpgv/

Answer 2

duration 的值是多少？

更好用

setInterval(函数() {
// 刷新列表 }, 5000)

其中第二个参数是毫秒数。

关于 everyTime 的注意事项

如果您确实想使用 everyTime，则需要将第一个参数设置为字符串，即：

$(文档).everyTime("5s",
函数(i) { }, 0);

不需要使用“线性”
如果您的动画突然停止，请检查持续时间，增加动画时间或使用慢速

jQuery('#belt').animate({宽度:
'+=235px'}, '慢');