Question

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

$(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;

作为旁注，如果只有其中一个，则应将navImage类替换为ID。

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

2 个答案: