Een functie in de Jquery-animatie in de wachtrij plaatsen

Hallo, ik probeer een gelaagd beeldeffect te maken, maar ik heb problemen met het in een rij zetten van een functie, samen met jQuery-animatie.

In principe moet ik al mijn .bar divs verbergen en dan de functie uitvoeren, waarna ze één voor één vervagen. Ik moet het op deze manier doen omdat er meerdere afbeeldingen zullen zijn en dit effect zal de overgang tussen hen creëren.

<div class="container">
<div class="image">
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
</div>

and the CSS is like this

.container {width:700px;height:400px;margin:0 auto;background:#FF0;}
.image {background:green; width:700px; height:300px; }
.bar { height:300px; width:50px; background:orange; float:left;}

and the javascript/jquery is like this

$(function(){

var i = -1;

function fading(){
    function fader(){
    setTimeout(function() {          
          i++;                    
          if (i < 15) {          
             $('.bar:eq(' + i + ')').fadeIn('200');
             fader();           
          }                       
       }, 100)
    }
    fader()
}

$('input').click(function(){

    $('.bar').hide().queue(function(){
                    fading()
                    $('this').dequeue();
                    });
});


});

If anyone has ideas on how this can be done differently or achieved in the way I have laydd out that would be great

0

1 antwoord

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.

0
toegevoegd
Hoe zou ik de volgende actie in de wachtrij plaatsen in de functie fader() ?
toegevoegd de auteur Psylant, de bron
ok yep dat werkt prima, maar het probleem is wanneer ik klik om de functie opnieuw uit te voeren, het wordt niet uitgevoerd. Met andere woorden, eerste klik werkt elke klik nadat niet. Bedankt voor uw hulp, sorry dat het moeilijk is uit te leggen wat ik precies probeer te bereiken via de tekst.
toegevoegd de auteur Psylant, de bron
Een manier om dit te doen is in het codevoorbeeld dat ik aan mijn antwoord heb toegevoegd.
toegevoegd de auteur jfriend00, de bron
Ik heb meer aan mijn antwoord toegevoegd om het te laten werken bij volgende klikken. Ter informatie: u moet waarschijnlijk beschermen tegen een klik terwijl deze bezig is met animeren.
toegevoegd de auteur jfriend00, de bron