javascript - 使用 jQuery/jQuery UI 滑动单词

Question

我有一个带有强调词的句子。该强调的单词将通过向上滑动而消失，并被另一个向上滑动的单词取代。我尝试像这样使用 jQuery (edge) 和 jQuery UI 1.8.9 ( see fiddle )，但无法让它运行:

HTML

<p>This is my text
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
    <span>five</span>
without fear.</p>

CSS

span {
    display: none;
    color: red;
}
span:first-child {
    display: inline-block;
}

JavaScript

$(function () {
    var first = $('span:first-child');
    replaceWord(first);
});

function replaceWord(word) {
    var next = word.next();
    if (typeof(next) != "undefined") {
        first.hide("slide", {
            direction: "up"
        }, 500, function () {
            next.show("slide", {
                direction: "down"
            }, 1000);
            replaceWord(next);
        });
    }
}

为了感受我正在寻找的东西:我设法获得了这种效果，但没有使用 jQuery 1.9.1/jQuery UI 1.9.2 on this fiddle 递归调用该函数。 。这有一个 CSS 错误，因此它在动画时应用 display: block。

有什么想法吗？

Answer 1

这是您更正后的代码(仍然不是好的结果，但现在可以工作了):

JS:

$(function () {
   var first = $('span:first-child')[0]; //It's an array
   replaceWord(first);
});

function replaceWord(word) {
var next = $(word).next(); //next is a jQuery func
if (typeof(next) != "undefined") {
    $(word).hide("slide", { //same with hide
        direction: "up"
    }, 500, function () {
        $(next).show("slide", {
            direction: "down"
        }, 1000);
        replaceWord(next);
    });
  }
}