How do I animate dynamic text with JavaScript?

Question

A span element,

<span id="example">Start</span>

JavaScript

var texts = ["example1", "example2", "example3"];
var count = 0;
function changeText() {
    $("#example").text(texts[count]);
    count < 3 ? count++ : count = 0;
}
setInterval(changeText, 500);

Fiddle

How can I add animations to the newly added element to span,

I want use animations from animate.css, bounceIn while the element enters and bounceOut while the item disappears and so on till the last item in the list.

Update:

Fiddle updated with animate.css

Answer 1

Try utilizing jQuery UI - Bounce Effect

css

#example {
    top:50px;
    height:100px;
    width:100px;
    position:relative;
    display:block;
}

js

var texts = ["example1", "example2", "example3"];
var count = 0;

function changeText() {
    $("#example").delay(10)
        .hide("bounce", {
        times: 3
    }, 1500, function () {
        $(this).text(texts[count]).show("bounce", {
            times: 3
        }, 1500, function () {
            count < 2 ? count++ : count = 0;
            changeText();
        });
    });
}
changeText();

jsfiddle http://jsfiddle.net/989dbjn8/3/

Answer 2

This fiddle should work.

var texts = ["example1", "example2", "example3"];
var count = 0;
function changeText() {
    $('#example').addClass('animated infinite bounce');
    $("#example").text(texts[count]);
    count < 3 ? count++ : count = 0;
}
setInterval(changeText, 500);