Issue on Adding and Removing Animate Class to and item using Animate.css

Question

Can you please take a look at This Demo and let me know how I can use the .removeClass(animated fadeIn) or add fadeOut class to the element after loading each item of the text array?

basically what I want to do is adding fade in and out for each element of array on appearing on the box .changeText

<div class="changeText" >Welcome</div>

<script>
$(function () {
    var text = ["Welcome", "Hi", "Sup dude"];
    var counter = 0;
    setInterval(change, 3000);
    function change() {
     $(".changeText").html(text[counter]).addClass('animated fadeIn');
        counter++;
        if(counter >= text.length) { counter = 0; }
    }
});
</script>

Answer 1

You can remove the animation bu using

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

It will trigger on animation is done.

Answer 2

You can use fadeIn() and fadeOut() for this:

$(function () {
    var text = ["Welcome", "Hi", "Sup dude"];
    var counter = 0;
    setInterval(change, 3000);
    function change() {
        $(".changeText").fadeIn(500).html(text[counter]).fadeOut(500);
        counter++;
        if(counter >= text.length) { counter = 0; }
    }
});

Here is an Example

---

Simply adjust the value of 500 to change the speed.