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

使用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;
}

Answer 2

以下是您的代码已更正（仍然不是很好的结果，但它现在正在运行）：

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

使用jQuery / jQuery UI滑动单词

2 个答案: