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

Question

你能看一下 This Demo 并告诉我如何在加载每个项目后使用 .removeClass(animated fadeIn) 或添加 fadeOut class 到元素吗文本数组的？

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

您可以使用

删除动画

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

它会在动画完成时触发。

Answer 2

您可以为此使用 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; }
    }
});

Here is an Example

只需调整 500 的值即可改变速度。

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

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

javascript

jquery

animate.css