Question

当用户点击按钮时，我试图让孩子跨度淡出，更改其文本，淡入，然后恢复原始文本，淡出并再次出现：

<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（）的约束。使用动画调用的callback参数来获得正确的结果：

$('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

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

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

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

Answer 3

你应该在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 4

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

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

Answer 5

您正在调用.text（）两次，一次使用'Clicked'，然后使用.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);
});

为什么我的span文字没有变化？

5 个答案: