Question

span元素

<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

如何将动画添加到新添加的元素中，

我希望在元素输入时使用来自animate.css，bounceIn的动画，并在项目消失时使用bounceOut，依此类推，直到列表中的最后一项。

更新

小提琴更新了animate.css

Answer 1

尝试使用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

此fiddle应该有效。

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);

如何使用JavaScript为动态文本设置动画？

2 个答案: