Question

请您查看This Demo并告诉我如何在加载文本数组的每个项目后使用.removeClass(animated fadeIn)或将fadeOut类添加到元素中？< / p>

基本上我想做的是在框.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添加和删除Animate类和项目的问题

2 个答案: