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

Question

我需要有人帮助让下面的代码正常工作。我已经让它工作了，这样当用户将鼠标悬停在图像上时，它会向上移动，然后在失去焦点时向下移动，但现在我希望它在无限循环的窗口加载上运行。

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

目前，它仅向上移动 13 像素，而不是向下移动 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);
});

=== UPDATE 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 类。