jquery循环间隔

我有一系列动画坐标堆叠在一个循环内。我想运行所有坐标在一段时间内，当它完成所有它必须从顶部开始并再次贯穿它们。jquery循环间隔

该循环有效，但它不会从第一个坐标（'top':'+=50'和'left':'+=300'）开始循环。

var port = $('span.view-port'), 
    yoyoDuration = 100, 
    run = setInterval(function(){ 
      port.animate({ 
      'top': '+=50', 
      'left': '+=300' 
      }, {duration: 1500}) /* -- first co-ordinates -- */ 
      .animate({ 
      'top': '+=80', 
      'left': '-=300' 
      }, {duration: 1500}) 
      .animate({ 
      'left': '+=300', 
      }, {duration: 2500}) 
      .animate({ 
      'top': '-=80', 
      'left': '-=300' 
      }, {duration: 2500}) 
      .animate({ 
      'top': '+=150', 
      'left': '+=300' 
      }, {duration: 2500}) 
      .animate({ 
      'top': '+=50', 
      'left': '-=300' 
      }, {duration: 2500}) /* -- last co-ordinates -- */ 
    }, 500); 

    setTimeout(function() { 
    }, yoyoDuration);

DEMO：http://jsfiddle.net/simomultimedia/NXSVk/1/

来源

2013-02-11 D' lo DeProjuicer

如果你的最后的动画不把对象返回您想要的循环重新开始，那么你将不得不以添加一个新的最后一步，你的动画把它背在正确的地方，或只是用'.css（）'把它重新放回正确的位置。由于您使用'+ ='和' - ='，这些是相对于当前位置。因此，为了在每次迭代开始时使当前位置成为您想要的值，您必须使这些数字能够做到这一点。 – jfriend00 2013-02-11 07:24:56

啊现在我明白了，我正在关注循环，而解决方案在最后一个动画上。谢啦！ – 2013-02-11 08:24:50

似乎有一个数学错误。如果你希望你的最后一个动画的元素移动到起始位置，将其更改为：

.animate({ 
    'top': '-=200', 
    'left': '-=300' 
}

但如果你想让它移动到开始后你当前最后动画然后添加以下之后动画：

.animate({ 
    'top': '-=250' 
}

来源

2013-02-11 08:16:55

jquery循环间隔

回答

相关问题