2

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

<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/

4

5 回答 5

4

.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);
                });
            });
    });
});
于 2013-05-03T01:57:34.277 回答
3

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

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

$span.fadeOut(180)
    .text('Clicked')
    .fadeIn(180)
    .delay(1200)
    .fadeOut(180, function() { span.text($text) })
    .fadeIn(180);
于 2013-05-03T01:57:14.167 回答
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);    
});

演示

于 2013-05-03T01:57:51.460 回答
1

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

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

于 2013-05-03T01:57:11.380 回答
0

您调用 .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);
});
于 2013-05-03T01:58:02.483 回答