JS / jQuery цикл затримки для отримання результату бажання (delay () не працює) - javascript, jquery, loops, delay

Я намагаюся створити піктограму завантаження, переміщаючи 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 (), але:

delay (800) не працює, оскільки delay () працює лише в анімаційних ефектах jquery, а .css () не є одним із них.

Як затримати цей цикл?

Відповіді:

Я б запропонував використовувати плагін jQuery timer: 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 );
});

Ви розглядали використання animate () замість css ()? Я не впевнений на 100%, що розумію, що ви намагаєтесь досягти, тому це якось постріл у темряві.

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

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

Ви можете використовувати функції 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()

});