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

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

本文关键字：删除 动画类 问题 添加 Animate css 于使用      更新时间：2023-09-26

你能看看这个演示吗？让我知道如何在加载文本数组的每个项后使用.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>

您可以使用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的值即可更改速度。

您可以使用删除动画bu

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

它将在动画完成时触发。

相关文章：