JS/boucle de retard jQuery pour obtenir résultat du désir (retard() ne fonctionne pas)

Question

Je suis en train de créer une icône de chargement en déplaçant le fichier css « background-position » d'une image dans une boucle:

$('#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); 
    } 

}); 

Le problème ici est qu'il s'exécute rapidement donc je ne vois pas 'l'animation' du fond en mouvement. J'ai donc ajouté jquerys delay(), mais:

delay (800) ne fonctionne pas car delay() ne fonctionne que dans les effets d'animation jquery et .css() n'en fait pas partie.

Comment retarder cette boucle?

Answer 1

Je suggère d'utiliser le plugin 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); 
}); 

Dans le cas où vous ne voulez pas de plug-ins, utilisez 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

Vous pouvez utiliser les fonctions setTimeout() et clearTimeout() pour accomplir cela.

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() 

}); 

Answer 3

Avez-vous envisagé d'utiliser Animate() au lieu de css()? Je ne suis pas sûr à 100% que je comprends ce que vous essayez d'accomplir, donc c'est un coup dans le noir.

Answer 4

Chrome, Safari et IE3 + devraient prendre en charge background-position-y, donc si vous ciblez ce navigateur spécifique, en utilisant jquery vous pouvez simplement faire animation() sur backgroundPositionY propriété - http://snook.ca/archives/html_and_css/background-position-x-y (sur Firefox l'effet ne fonctionnera pas)