jQuery动画上的窗口加载在无限循环？ [英] jQuery animation on window load on an infinite loop?

问题描述

我需要一个手使这段代码工作。我已经有它的工作，所以当用户悬停在图像上方动画，然后向下当失去焦点，但现在我想要它运行在无限循环的窗口加载。

I need a hand making this code below working. I've had it working so that when the user hovers over the image it animates up, then down when losing focus, but now I want it to run on window load on an infinite loop.

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

目前只有13px的动画效果，而不是动画， 。我需要使用某种回调吗？

At the moment it's only animating 13pixels up, not down, and obviously the animation doesn't currently loop. Do I need to use some sort of callback?

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

Any help would be great, thanks.

]删除高度：切换，并不意味着包含该内容。

Removed the height:toggle, didn't mean to include that.

推荐答案

b

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 ===

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

=== UPDATE 2 ===

=== UPDATE 2 ===

现在他们开始随机延迟：

Now they start with random delay:

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 ===

=== Update 3 ===

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

And in this jsfiddle additional with random speed: jsfiddle 3.

这篇关于jQuery动画上的窗口加载在无限循环？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！