在无限循环上加载窗口的jQuery动画？

我需要一只手使这个代码在下面工作。 我已经让它工作，以便当用户在图像上盘旋时它会动画，然后在失去焦点时向下，但现在我希望它在无限循环上的窗口加载上运行。

$(document).ready(function(){ $(window).load(function(){ $('.navImage').animate({top:'-=13'}, 700) }, function(){ $('.navImage').animate({top:'+=13'}, 700); }); }); 

目前只有动画13像素，而不是向下，显然动画目前没有循环。 我需要使用某种回调吗？

任何帮助都会很棒，谢谢。

[编辑]删除高度：切换，并不意味着包括。

Answer 1

试试这个：

 function moveUp() { $('.navImage').animate({top:'-=13', height:'toggle'}, 700, moveDown); } function moveDown() { $('.navImage').animate({top:'+=13'}, 700, moveUp); } $(document).ready(function(){ $(window).load(moveUp); }); 

===更新1 ===

 function move(jElem, bUp) { jElem.animate( {top: (bUp ? '-' : '+') + '=13'}, 700, function() { move(jElem, !bUp); } ); } $(document).ready(function() { $(window).load(function() { $('.navImage').each(function() { move($(this), true); }); }); }); 

另见我的jsfiddle 。

===更新2 ===

现在他们从随机延迟开始：

 function move(jElem, bUp) { jElem.animate( {top: (bUp ? '-' : '+') + '=13'}, 700, function() { move(jElem, !bUp); } ); } $(document).ready(function() { $('.navImage').each(function(iIndex, jElem) { // get random delay var iTime = Math.floor(Math.random() * 700); setTimeout( function() { move($(jElem), true); }, iTime ); }); }); 

另见我的jsfiddle 2 。

===更新3 ===

并在这个jsfiddle附加随机速度： jsfiddle 3 。

Answer 2

 function anim_up() { $('.navImage').animate({top:'-=13', height:'toggle'}, 700, anim_down) }; function anim_down() { $('.navImage').animate({top:'+=13'}, 700, anim_up); }; window.onload = anim_up; 

作为旁注，您应该使用ID替换该navImage类，如果只有其中一个。