jQuery: Counter, Tricky problema con effetti per persone intelligenti - jquery, coda, effetti, contatore

Ho creato questo contatore che penso sia bello perché solo apporta modifiche visibili ai numeri che vengono cambiati ogni volta che viene attivato.

Questo è il codice

// 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>

Il problema è che ho usato precedentemente queue ()funzione to delay () $ (this) .text (v.charAt (f)); di 100 ms ((senza coda la funzione text () - non sarebbe ritardata perché non si trova nella catergoria fx) in modo che il testo venga aggiornato prima che l'oggetto si sbiadisca in opacità = 0. Sembrerebbe stupido.

Quando si aggiungono più contatori, solo uno deii contatori contano. Quando si rimuove la funzione di coda, entrambi i contatori funzionerebbero, ma come si può immaginare, il ritardo del testo () sparirebbe (poiché non è una categoria fx).

Probabilmente è un po 'complicato capire come possohanno più contatori, e ancora ritardare la funzione text () di 100 ms, ma speravo che ci fosse qualcuno con capacità cerebrale di riserva per queste cose;)

Puoi vedere un (NSFW) problema demo qui:

Basta guardare sotto le icone di condivisione e noterai che il testo cambia DURANTE la dissolvenza degli oggetti.

In cerca di aiuto per risolvere questo problema. Vorrei chiamare la funzione text () una volta che il testo è sbiadito nell'opacità 0, quindi sfumare una volta che il text () è stato eseguito.

Grazie per il tuo tempo.

risposte:

0 per risposta № 1

Come "omfgroflmao" ha detto nei commenti, gli effetti hanno richiamate:

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

Vedi ad esempio il fadeOut docs

Modifica: nel tuo esempio, potrebbe anche essere più pulito archiviare il contatore usando .data() piuttosto che costruirlo dagli elementi di span.

// 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

---