I'm having trouble syncing a color change animation using jQuery. For some reason, the font color inside a button element only changes when every other color change has finished processing. Here is the 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"]
});
Here is a link to a CodePen that shows this project in action: http://codepen.io/christianflorez/full/OWdYRm/
When clicking on the "Get a new quote" button, every time the font color in the button changes to white, it doesn't change in sync with the rest of the DOM. Anyone know why this might be happening? I've tried testing the code across multiple browsers and the same issue appears. Thanks everyone for your help.