Wie aktualisiert man Animationseffekte mit jquery?

Question

Ich versuche, einen Div-Inhalt zu aktualisieren, der animiert mit slideInleft Animationsklasse von animation.css-Bibliothek und nach 2 Sekunden versuche ich, den Effekt von Klasse zu aktualisieren.

var i = 0; 
setInterval(function showText{ 
var txt= data; // my data is an array with 5 values 
$("#text").empty().append(txt[i].value).addClass('slideInLeft'); 
},2000); 
$("#text").empty().append(txt[i].value).addClass('slideOutLeft'); 

Answer 1

hinzufügen wie diese animierte:

.addClass('animated slideInLeft') 

Aber ich empfehlen Sie diese Alternative zu verwenden (jQuery-Plugin): https://github.com/craigmdennis/animateCSS/blob/master/README.md

Einfachere Wirkung

zu implementieren und anpassen

Answer 2

Wie ist das?

setTimeout(function() { 
 
    $('#text').text('hello').addClass('slideInLeft'); 
 

 
    setTimeout(function() { 
 
     $('#text').text('goodbye').removeClass('slideInLeft').addClass('slideOutRight'); 
 
    }, 2000); 
 
    
 
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> 
 
<div id="text" class="animated"></div>