Een functie in de Jquery-animatie in de wachtrij plaatsen

Question

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

toegevoegd 27 oktober 2011 op 03:59 de auteur Psylant

Bekeken: 30

de bron

1 antwoord

de auteur jfriend00 · Answer 1 · 2011-10-27T04:07Z

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.