当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Loop/Restart Animation with Velocity without Playing in Reverse

问题描述:

I am using Velocity to translate an element across the screen. Upon completing, I would like the element to return to its origin point and loop the animation, bypassing the default reverse effect that occurs while looping.

I have my standard animation function into which I pass my values:

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

callback();

}});

Is there a way I could achieve this functionality with translating an element as opposed to just rotating it?

网友答案:

Make sure you initialise the position in your animation function - see the example below:

$(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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: