jquery animieren innerhalb einer for-Schleife

Ich habe eine Animation, wo ich nicht sicher bin, was schief läuft. Meine FadeIn/Out-Verzögerungen werden nicht eingehalten. Ich versuche eine Kachel auszublenden, ersetze sie durch eine neue Kachel und fade sie ein. Dies ist in diesem Fall 4 mal möglich, könnte aber die for-Schleife variieren.jquery animieren innerhalb einer for-Schleife

Hier ist eine verkürzte Version meines Codes. Auf einem Klick Aktion werden 4 Steine durch neue Fliesen ersetzt, aber es gibt keine Verzögerungen bei der Animation, auch bei 2000.

for (var i = 0; i < animation.length; i++) { 
    animation[i]['old'] 
     .animate({ opacity: 0 }, { 
      duration: 500, 
      queue: function() { 
       jQuery(this) 
        .replaceWith(self.template(animation[i]['new'])) 
        .css({ opacity: 0 }) 
        .animate({ opacity: 100 }, 2000); 
      } 
     }); 
}

Quelle

2016-09-20 Chris

Die FadeIn/Out-Methoden sind asynchron und werden wahrscheinlich alle zur gleichen Zeit ausgeführt. Um eine bessere Eingabe zu geben, fügen Sie bitte Ihren Code ein –

Sie haben auch andere Probleme, aber das ist ein Problem: http://StackOverflow.com/Questions/750486/Javascript-Closure-Inside-Loops-Simple-Practical-Beispiel –

Wenn ich folgendes verwende: $ tile.animate ({Opazität: 0}, 1500) .delay (1500); $ tile.replaceWith (self.template (newTile) .css ({Opazität: 0})). Delay (2000); Ich merke, dass die FadeOut-Animation nicht mehr funktioniert. Es hat also mit der Funktion replaceWith() zu tun. – Chris

Der zweite Parameter des ersten belebter ist error.should Funktion.

Quelle

2016-09-20 00:48:05

Ich habe mein Problem gelöst, indem ich eine Funktion zur Animation meiner Kacheln erstellt habe. Die Ursache meines Problems war, dass meine Fade-Animationen asynchron waren und meine for-Schleife synchron war. Durch das Einkapseln meiner Animation in einer Funktion konnte die Animation auf eine etwas synchrone Weise ausgeführt werden. Hier ist meine grobe Lösung.

... 
shuffle: function() { 
    for (var i = 0; i < someTable.length; i++) { 
     this.animate($tile, newTile); 
    } 
}, 
animate: function($tile, newTile) { 
    $tile.fadeOut('slow', function() { 
     var t = self.template(newTile).hide(); 
     $(this).replaceWith(t); 
     t.fadeIn('slow'); 
    }); 
} 
...

Quelle

2016-09-20 17:45:54 Chris

jquery animieren innerhalb einer for-Schleife

Antwort

Verwandte Themen