jQuery: compteur, problème Tricky avec des effets pour les personnes intelligentes

Question

J'ai fait ce compteur que je pense est cool parce que seulement rend visibles les changements dans les numéros changés entre chaque fois qu'il est déclenché.

Ce code

// counter 
$('a').click(function(){ 
    var u = ''; 
    var newStr = ''; 
    $('.counter').each(function(){ 
     var len = $(this).children('span').length; 
     $(this).children('span').each(function(){ 
      u = u + $(this).text(); 
     }); 
     v = parseInt(u) + 1; 
     v = v + ''; 
     for (i=v.length - 1; i >= 0; i--) { 
      if (v.charAt(i) == u.charAt(i)) { 
       break; 
      } 
     } 
     slce = len - (v.length - (i + 1)) 
     updates = $(this).children('span').slice(slce); 
     $(updates).fadeTo(100,0).delay(100).each(function(index){ 
      f = i + 1 + index; 
      $(this).text(v.charAt(f)); 
     }).fadeTo(100,1); 
    }); 
}); 

Markup:

<span class="counter"> 
<span></span><span></span><span></span><span></span><span></span><span></span><span style="margin-right:4px;">9</span><span>9</span><span>9</span><span>9</span> 
</span> 
<a href="">Add + 1</a> 

Le problème est que je fonction file d'attente utilisée précédemment() pour retarder() $ (this) .text (v.charAt (F)); par 100ms, (sans queue la fonction text() ne serait pas retardée car elle n'est pas dans la classe fx) de sorte que le texte serait mis à jour avant que l'objet ne soit passé à opacity = 0. Cela aurait l'air stupide.

Lors de l'ajout de plusieurs compteurs, seul l'un des compteurs compte. Lors de la suppression de la fonction de file d'attente, les deux compteurs fonctionneraient, mais comme vous pouvez l'imaginer, le délai du texte() aurait disparu (car il n'est pas fx-category).

Il est probablement un peu difficile de comprendre comment je peux avoir plusieurs compteurs, et encore retarder la fonction text() de 100ms, mais j'espérais qu'il y a quelqu'un ici avec la capacité du cerveau pour ces choses;)

vous pouvez voir un (NSFW) problem démo ici:

regarder juste sous les icônes de partage et vous remarquerez que le texte change alors que les objets s'effacent.

Vous cherchez de l'aide pour résoudre ce problème. Je voudrais appeler la fonction text() une fois que le texte a passé à l'opacité 0, puis s'estomper une fois que le texte() a été exécuté.

Nous vous remercions de votre temps.

Answer 1

Comme 'omfgroflmao dit dans les commentaires, les effets ont callbacks:

$(updates).fadeOut(100, function() { 
    f = i + 1 + index; 
    $(this).text(v.charAt(f)); 
    $(this).fadeIn(100); 
}); 

Voir par exemple le fadeOut docs

Edit: Dans votre exemple, il peut aussi être plus propre pour stocker le compteur à l'aide .data() plutôt que de le construire à partir des éléments de portée.

// init counter 
$('.counter').data('tally', 0); 

// when you're incrementing 
var u = $(this).data('tally') + ''; 
$(this).data('tally', $(this).data('tally') + 1); 
var v = $(this).data('tally') + ''; 
// work out which span elements to update etc