javascript - 从 jQuery 动画化 HTML 元素

Question

我坚持使用一天以来一直在尝试的代码。代码是在 HTML 元素的 1 秒后更改文本。而且我一直在为不断变化的文本添加动画。

<h1>Your Favorite Source of<span id="changingtext"></h1>

我的目标是来自 jQuery 的#changingtext 元素。

(function () {
var texts = ["One", "Two", "Three", "Four"];
var count = 0, interval = 1000;
addText();

function addText() {

    var usrtxt = $("#changingtext");
    usrtxt.animate({marginTop:-10}, "fast");
    usrtxt.animate({marginTop:0}, "fast");
    usrtxt.animate({marginTop:-5}, "fast");
    usrtxt.animate({marginTop:0}, "fast");
    usrtxt.text(texts[count]);
    count += count < 3 ? 1 : -3;

    setTimeout(addText, interval);

}}());

我希望文本在每次更改时都为弹跳效果设置动画。我也尝试过使用 animate.css 但无法为此添加类。

请帮忙。

谢谢。

Answer 1

你确定你的代码是正确的吗？

标签跨度未闭合。

你给它编码<h1>Your Favorite Source of<span id="changingtext"></h1>

右边应该是<h1>Your Favorite Source of<span id="changingtext"></span></h1>

如果代码在你的源文件中，你可以尝试这样的方法。它是 HTML DOM。

HTMLElement.innerHTML="New text!";