为什么我的跨度文本没有改变？

Question

当用户点击一个按钮时，我试图让子 span 淡出、更改其文本、淡入，然后恢复为原始文本、淡出并再次淡入：

<button id="clickMe">
    <span>Click Me</span>
</button>

$('body').on('click','#clickMe',function(e){
    e.preventDefault();
    var $this = $(this);
    var $span = $this.find('span');
    var $text = $span.text();
    $span.fadeOut(180)
        .text('Clicked')
        .fadeIn(180)
        .delay(1200)
        .fadeOut(180)
        .text($text)
        .fadeIn(180);
});

按钮以正确的间隔淡出，但文本永远不会改变。没有错误。我做错了什么？

证明，如果需要证明：http://jsfiddle.net/verism/XPyHZ/

Answer 1

.text() 每次都立即应用 - 它不受 .delay() 的约束。 使用动画调用的回调参数得到正确的结果：

$('body').on('click','#clickMe',function(e){
    e.preventDefault();

    var $this = $(this);
    var $span = $this.find('span');
    var $text = $span.text();

    $span.fadeOut(180, function() {
        $span.text('Clicked')
            .fadeIn(180)
            .delay(1200, function() {
                $span.fadeOut(180, function() {
                    $span.text($text)
                        .fadeIn(180);
                });
            });
    });
});

Answer 2

你应该在fadeIn或fadeOut之后使用回调函数做一些处理。

否则text("Clicked") 和text($text) 会立即生效。

$('body').on('click','#clickMe',function(e){
    e.preventDefault();
    var $this = $(this);
    var $span = $this.find('span');
    var $text = $span.text();
    $span.fadeOut(2000, function() {
            $(this).text("Clicked");
        })
        .fadeIn(180)
        .delay(1200)
        .fadeOut(180, function() {
            $(this).text($text)
        })
        .fadeIn(180);    
});

DEMO

Answer 3

.text()实际上不会等待延迟，只有动画函数会考虑延迟。

所以这里发生的情况是文本更改为新值并立即返回旧值。使用fade方法回调等待延迟。

$span.fadeOut(180)
    .text('Clicked')
    .fadeIn(180)
    .delay(1200)
    .fadeOut(180, function() { span.text($text) })
    .fadeIn(180);

Answer 4

这是因为文本更改不会像 fadeIn/fadeOut 函数那样排队到效果队列中。文本更改，然后更改回来。它发生得如此之快，你永远看不到它。如果您将最终 text() 调用中的文本设置为原始文本以外的其他内容，您会看到它正在发生变化。

解决方案是在fadeIn|Out 函数上使用回调函数。

Answer 5

你调用 .text() 两次，一次是“点击”，然后你用 .text($text); 将其重置为初始文本；

http://jsfiddle.net/XPyHZ/3/

$('body').on('click','#clickMe',function(e){
    e.preventDefault();
    var $this = $(this);
    var $span = $this.find('span');
    var $text = $span.text();
    $span.fadeOut(180)
        .text('Clicked')
        .fadeIn(180)
        .delay(1200)
        .fadeOut(180)
        .fadeIn(180);
});