使用 jQuery/jQuery UI 浏览单词

Question

我有一个带有强调词的句子。这个被强调的词将通过向上滑动消失并被另一个也向上滑动的词替换。我尝试像这样 (see fiddle) 使用 jQuery (edge) 和 jQuery UI 1.8.9，但无法运行：

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

Answer 2

使用 float:left 似乎可以工作...

http://jsfiddle.net/apcwonn7/2/

<p><span>This is my text</span>
    <span class='a'>one</span>
    <span class='b'>two</span>
without fear.</p>
<button id="go">Go</button>

Javascript：

$(function() {
    $('span.a').show();
});

$('#go').click(function () {
    var first = $('span.a');
    var next = $('span.b');
    console.log(first, next);
    first.hide("slide", {
        direction: "up"
    }, 500, function () {
        next.show("slide", {
            direction: "down"
        }, 1000);
    });
});

CSS：

span {
    float: left;
}

span.a {
    display: none;
    color: red;
}

span.b {
    display: none;
    color: blue;
}