Numéros animés (semi-compte à rebours) avec JQuery?

Question

J'essaye de faire une valeur numérique, disons 5000, change rapidement à une autre valeur, disons 4000, en utilisant JQuery. En ce moment je fais bien en utilisant:

mod(".class",4000,"add"); 

function mod(id,value,type){ 
    var numb = $(id).html(); 
    var current_value = parseInt(numb); 
    do { 
     if(type == "add") 
      increment(id); 
     else 
      decrement(id); 
     current_value = parseInt(numb); 
    }while(current_value != value); 

    function decrement(id){ 
     $(id).html(current_value-1); 
    } 

    function increment(id){ 
     $(id).html(current_value+1); 
    } 
} 

Je sais qu'il est sans doute pas la meilleure façon de s'y prendre, mais ce que je dois pour cela faire est le compte à rebours (ou plus) les chiffres très rapidement de la valeur actuelle la valeur définie. Ce que j'ai prévu avec cette méthode était d'avoir un retard en utilisant setInterval ou setTimeout mais cela fait échouer le script entier.

Tout conseil est apprécié, mais je préférerais ne pas utiliser de gros plugins pour cette tâche apparemment simple.

Answer 1

Lorsque j'ai exécuté le code que vous avez fourni, j'ai été pris dans une boucle infinie. A la fin de la boucle do, vous avez

current_value = parseInt(numb);

mais la valeur du engourdis n'est définie au début de la fonction, il se passe toujours. Si vous changez que pour

current_value = parseInt($(id).html());

il fonctionne très bien. Sauf que cela semble se produire instantanément.

J'ai piraté une méthode pour réaliser l'animation en utilisant des délais d'attente qui semble fonctionner assez bien, mais comme je suis encore relativement nouveau en javascript, je ne sais pas s'il y a une approche plus efficace. Juste tweak le deuxième param passé à setTimeout pour obtenir la vitesse désirée. Et si vous voulez changer la valeur de l'incrément/décrément, il suffit de changer la décélération de dir.

function mod2(id, value) { 
    var numb = $(id).html(); 
    var current_value = parseInt(numb); 

    // determine direction to go 
    var dir = 1; 
    if (current_value - value > 0) { 
     dir *= -1; 
    } 
    getThere(id, current_value, value, dir); 
} 

function getThere(id, current_value, target_value, dir) { 
    current_value += dir; 
    $(id).html(current_value); 
    if (current_value != target_value) { 
     setTimeout("getThere('"+id+"',"+current_value+","+target_value+","+dir+")", 10); 
    } 
} 

Answer 2

Ce que vous faites ici est de mettre à jour le DOM plusieurs fois rapidement. En conséquence, le navigateur attendra jusqu'à ce que vous ayez effectué toutes vos modifications, et ce n'est qu'alors qu'il redessinera la page. Donc, vous ne serez pas voir aucun changement visuel jusqu'à ce que le nombre va tout le chemin jusqu'à 4000.

Oui, vous avez besoin d'utiliser un setTimeout ou setInterval/clearInterval. Ou, pour plus de clarté du code, vous pouvez utiliser le jQuery "wait" plugin:

// (code to get new value goes here) 

$('.class').wait(100, function(){ 
    $(this).text(newValue); 
}); 

Au lieu de html(), je l'ai utilisé text(), car il semble que vous n'avez pas besoin de modifier la structure HTML.

Answer 3

J'aime l'approche de l'épine avec setTimeout, mais je réduis vers le bas à 2 fonctions et démarrer après le chargement de la fenêtre pour assurer la page chargée avant la mise à jour du compteur:

var counterTimeout = 10; // time between increments in ms 
$(window).load(function() { 
    mod('class', 'add', 4000); 
}); 

function mod(class, type, targetVal) { 
    var $class = $(class); 
    var numb = parseInt($class.html()); 
    numb = (type == 'add') ? numb + 1 : numb - 1; 
    $class.html(numb); 
    if (numb != targetVal) { 
     setTimeout('mod("' + class + '","' + type + '",' + targetVal)', counterTimeout); 
    } 
} 

Le cas de base n » t satisfait dans l'événement $ class.html() commence avec une valeur supérieure à la targetVal dans le cas de 'add' ou inférieure à la targetVal dans l'autre cas. Vous devez vous assurer que cela n'arrive pas avant d'appeler la fonction.