Цикл задержки JS/jQuery для получения желаемого результата (delay() не работает)

Я пытаюсь создать значок загрузки, перемещая фоновое положение css изображения в цикле:

$('#LoginButton').click(function () {

    var i = 1, h = 0, top;

    for (i = 0; i <= 12; i++) {
        h = i * 40;
        top = h + 'px';
        $('#ajaxLoading').css('background-position', '0 -' + top).delay(800);
    }

});

Проблема здесь в том, что он работает слишком быстро, поэтому я не вижу «анимации» движущегося фона. Поэтому я добавил jquerys delay(), но:

delay(800) не работает, потому что delay() работает только с эффектами анимации jquery, а .css() не является одним из них.

Как задержать этот цикл?


javascript loops jquery delay
person Jonathan    schedule 11.11.2010    source источник
comment
не могли бы вы прокомментировать мой ответ ниже?   -  person St.Woland    schedule 11.11.2010

Ответы (4)


arrow_upward
2
arrow_downward

Я бы предложил использовать плагин таймера jQuery: http://jquery.offput.ca/js/jquery.timers.js

$('#LoginButton').click(function () {
    var times = 13;
    var delay = 300;
    var h = 0, top;
    $(document).everyTime(delay, function(i) {
        top = h + 'px';
        $('#ajaxLoading').css('background-position', '0 -' + top);
        h += 40;
    }, times);
});

Если вам не нужны плагины, используйте setInterva/clearInterval:

$('#LoginButton').click(function () {
    var delay = 300;
    var times = 13;
    var i = 0, h = 0, top;

    doMove = function() {
        top = h + 'px';
        $('#ajaxLoading').css('background-position', '0 -' + top);
        h += 40;

        ++i;
        if( i >= times ) {
            clearInterval( interval ) ;
        }
    }

    var interval = setInterval ( "doMove()", delay );
});
person St.Woland    schedule 11.11.2010
comment
Это круто! Святой Воланд, ты избавил меня от многих горя. Примечание для nubes: переменная задержки указывается в миллисекундах.. поэтому, если вы хотите преобразовать ее в секунды, сделайте следующее: var interval = setInterval(doMove(), delay*1000); - person Kevin Florida; 06.09.2011

arrow_upward
0
arrow_downward

Вы смотрели на использование animate() вместо css()? Я не уверен на 100%, что понимаю, чего вы пытаетесь достичь, так что это своего рода выстрел в темноте.

http://api.jquery.com/animate/

person SPoage    schedule 11.11.2010
comment
Я не хочу анимировать, потому что буду видеть движущийся фон. Я хочу, чтобы он «прыгал», поэтому я использую css. - person Jonathan; 11.11.2010
comment
В этом случае вам нужно будет определить функцию, которая изменяет положение элемента, как указано выше, а затем вызывать ее с помощью setTimeout(). Затем, как только загрузка будет завершена, вызовите clearTimeout() для определенного таймера, чтобы он не продолжал работать. - person SPoage; 11.11.2010

arrow_upward
0
arrow_downward

Chrome, Safari и IE3+ должны поддерживать background-position-y, поэтому, если вы ориентируетесь на этот конкретный браузер, используя jquery, вы можете просто создать свойство animation() on backgroundPositionY по времени — http://snook.ca/archives/html_and_css/background-position-x-y (в Firefox эффект не работает)

person Community    schedule 11.11.2010

arrow_upward
0
arrow_downward

Для этого вы можете использовать функции setTimeout() и clearTimeout().

IE:

var GLOBAL_i = 0;

function doAnimation() {

    var h = GLOBAL_i * 40;
    var top = h + 'px';
    $('#ajaxLoading').css('background-position', '0 -' + top);

    if (GLOBAL_i < 12) {
        GLOBAL_i++;

        t=setTimeout(doAnimation, 800);
    }
}

$('#LoginButton').click(function () {

    doAnimation()

});
person MatuDuke    schedule 11.11.2010