I have a div that I am populating repeatedly with content from Ajax. So what I want to do is wrap this swapping of content with animation out and then animation in.

<div id="pnlTheContent">Here is initial Content</div>

$("#pnlTheContent").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function (){
   $("#pnlTheContent").html(x.responseText);
   $("#pnlTheContent").switchClass("fadeOutLeft","fadeInLeft");
   // Do other handling (mdb-select, pickadate, etc)
});
$("#pnlTheContent").addClass("animated fadeOutLeft");

The problem with this is that it always fades out left twice. I've tried a bunch of things to lock down the content - if the animation class exists, etc. But I'm thinking there must be a simpler way to do this with a basic fade out, then fade back in process. What's the solution?

---