关于使用Animate.css向项目中添加和删除Animate类的问题

Question

您能否看一下本演示 ，让我知道加载文本数组的每个项目后如何使用.removeClass(animated fadeIn)或向元素添加fadeOut类？

基本上我想做的是为出现在盒子上的数组的每个元素添加淡入和淡出.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

您可以使用以下方法删除动画bu

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

它将在动画完成时触发。

Answer 2

您可以fadeIn()使用fadeIn()和fadeOut() ：

$(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; }
    }
});

这是一个例子

---

只需将值调整为500即可更改速度。