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

Question

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

$('#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 (), но:

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

Как отложить этот цикл?

Answer 1

Я бы предложил использовать плагин таймера 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 );
});

Answer 2

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

Answer 3

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

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

Answer 4

Для этого можно использовать функции 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()

});