jQuery Farbe animiert keine Synchronisierung über mehrere Elemente

Question

Ich habe Probleme beim Synchronisieren einer Farbwechselanimation mit jQuery. Aus irgendeinem Grund ändert sich die Schriftfarbe innerhalb eines Schaltflächenelements nur dann, wenn alle anderen Farbänderungen verarbeitet wurden. Hier ist der Code:

$(".jumbotron-fluid, .btn").animate({ 
    backgroundColor: colors[seed]["background"] 
}); 
$(".container").animate({ 
    backgroundColor: colors[seed]["container"] 
}); 
$("p, blockquote footer, .btn, a:link, a:visited, a:hover, a:active, a").animate({ 
    color: colors[seed]["font"] 
}); 

Hier ist ein Link zu einem CodePen, die dieses Projekt in Aktion zeigt: http://codepen.io/christianflorez/full/OWdYRm/

Wenn auf dem „Holen Sie sich ein neues Angebot“ klicken, jedes Mal, wenn die Schriftfarbe in der Die Schaltfläche ändert sich in Weiß und ändert sich nicht synchron mit dem Rest des DOM. Wer weiß, warum das passieren könnte? Ich habe versucht, den Code über mehrere Browser zu testen und das gleiche Problem erscheint. Danke an alle für Ihre Hilfe.

Answer 1

Der queue Parameter von animate wird standardmäßig auf true gesetzt. Wenn Sie zweimal .btn animieren, wird die zweite Animation nach dem Ende des ersten ausgelöst. Ändern Sie queue zu false für die erste .btn animieren. codepen link

$(".jumbotron-fluid, .btn").animate({ 
    backgroundColor: colors[seed]["background"] 
},{queue:false} 
); 
$(".container").animate({ 
    backgroundColor: colors[seed]["container"] 
    } 
); 
$("p, blockquote footer, .btn, a:link, a:visited, a:hover, a:active, a").animate({ 
    color: colors[seed]["font"] 
    } 
);