U kunt de animatiewachtrij niet op deze manier gebruiken omdat uw .queue
-oproep wordt vermengd met alle fadeIn()
-aanroepen en niet wacht tot na die als ze gebruiken ook de animatiewachtrij. Je zou een aparte wachtrij kunnen maken en die gebruiken, maar dat is het waarschijnlijk niet waard.
Waarom zou u niet alleen de functie fader()
activeren als u klaar bent met de 15 lagen?
Of u kunt een callback-functie doorgeven aan fader()
die u kunt gebruiken als u klaar bent met de 15 lagen?
Ik snap niet precies wat je probeert te doen, maar je kunt een andere functie hier in schoppen als je klaar bent met het vervagen in de 15 lagen (zie waar ik de else
heb toegevoegd):
function fading() {
var cntr = -1;
function fader() {
setTimeout(function() {
cntr++;
if (cntr < 15) {
$('.bar:eq(' + cntr + ')').fadeIn('200');
fader();
} else {
//done fading in the 15 items, now you can call some other function
//here to start the next operation
afterFade();
}
}, 100);
}
fader();
}
Probeer hiertoe uw klikcode te vereenvoudigen:
$('input').click(function(){
$('.bar').hide();
fading();
});
.hide()
is synchronous (it doesn't use the animation queue) so you can just call fading()
right after it.
U moet ook uw cntr-variabele bij de tweede oproep opnieuw initialiseren naar fading()
. In mijn codevoorbeeld hierboven veranderde ik de naam van de variabele van i
in cntr
en verhuisde de definitie en initialisatie ervan naar de top van de vervaging()
functie, zodat deze bij elke volgende oproep automatisch wordt geïnitialiseerd.