Lately, I've encountered an issue with animate.css while working on my latest project.
What I'm aiming to achieve is to update a paragraph of text on my website every five to ten seconds using jQuery. However, I don't want the text to simply change abruptly. Instead, I would like the previous text to smoothly disappear with the fadeOut animation from animate.css, and the new text to appear seamlessly with the fadeIn animation.
Currently, I have this code snippet (just an example):
setInterval(function() {
$("#myp").addClass('fadeOut');
$("#myp").text(sometext);
$("#myp").removeClass('fadeOut');
$("#myp").addClass('fadeIn');
$("#myp").removeClass('fadeIn');
}, 5000);
Each cycle uses a different value for sometext for simplicity.
Initially, I faced some issues with this code as the animation was not smooth but rather flickery. I attempted to improve it by introducing delays in the process using setTimeout between adding and removing classes. My thought was that removing the class before the CSS animation completes could be causing the problem, but the flickering issue still persisted.