jquery之以速度循环/重新启动动画，无需反向播放_编程设计

2026年07月28日4yxwkf

我正在使用 Velocity 在屏幕上平移元素。完成后，我希望元素返回到其原点并循环动画，绕过循环时发生的默认反向效果。

我有我的标准动画函数，我将我的值传递给其中:

$(element).delay(initialDelay).velocity(animationValues, {duration: duration, easing: easing, loop: loop, complete: function() { 
   callback(); 
}});

有没有办法通过平移元素而不是仅仅旋转元素来实现此功能？

请您参考如下方法:

确保在动画函数中初始化位置 - 请参阅下面的示例:

$(document).ready(function(){ 
 
  var el = $('#target'); 
   
  function anim() { 
    el.velocity({ 'left': 0   }, 0 ) 
      .velocity({ 'left': 300 }, { duration: 2000, complete: anim }); 
  }; 
 
  anim(); 
 
});

#target { 
  background: #999; width: 100px; height: 100px; position: absolute; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://cdn.jsdelivr.net/velocity/1.4.2/velocity.min.js"></script> 
<div id="target"></div>