jQuery анимация при загрузке окна по бесконечному циклу? - PullRequest
Новая
       26

jQuery анимация при загрузке окна по бесконечному циклу?

0 голосов
/ 03 октября 2011

Мне нужна рука, чтобы этот код работал ниже.У меня это работает так, что когда пользователь наводит курсор на изображение, которое он оживляет, то вниз, когда теряет фокус, но теперь я хочу, чтобы оно запускалось при загрузке окна в бесконечном цикле.в тот момент, когда анимация только 13 пикселей вверх, а не вниз, и, очевидно, анимация в настоящее время не зацикливается.Нужно ли мне использовать какой-нибудь обратный вызов?

Любая помощь была бы отличной, спасибо.

[EDIT] Убрал высоту: переключатель, не хотел включать это.

Ответы [ 2 ]

2 голосов
/ 03 октября 2011

Попробуйте: 

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 .

0 голосов
/ 03 октября 2011 
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 на идентификатор, если есть только один из них.

...