jquery按钮内容更改并再次返回

Posted 2023-05-08

【中文标题】jquery按钮内容更改并再次返回

【英文标题】：jquery button content change and back again

【发布时间】：2014-03-23 20:00:28

【问题描述】：

我试图在按钮按下时获得一个简单的反馈，以快速淡出按钮，更改其类和内容，淡入然后反向返回其原始状态。

这是我认为相当简单的代码。

$('#event1-btn-451').fadeOut(200).toggleClass('btn-primary btn-success').html('Success!').fadeIn(200);
$('#event1-btn-451').delay(2000).fadeOut(200).toggleClass('btn-success btn-primary').html('Add Event').fadeIn(200);

第一行本身工作正常，但如果我包含第二行，它会淡出，淡入具有原始颜色的相同“添加事件”按钮，然后在 2 秒延迟后再次执行完全相同的操作。

JSFIDDLE

第一次在这里发帖，当然，我已经用这个回答了很多答案了！

【参考方案1】：

这种动画必须是链式的，像这样：

jsFiddle

$('#event1-btn-451').click(function () 
    $(this).fadeOut(200, function()
        $(this).toggleClass('btn-primary btn-success')
            .html('Success!')
            .fadeIn(200) // No need to chain as there is a delay then
            .delay(2000)
            .fadeOut(200, function()
                $(this).toggleClass('btn-success btn-primary')
                    .html('Add Event')
                    .fadeIn(200);
            )
        )
);

【讨论】：

感谢@toni-almeida，这太完美了。现在我理解了淡入淡出的链接。

【参考方案2】：

我会为此使用 jQuery animate 方法。此处已介绍。

Change text (html) with .animate

【参考方案3】：

请试试这个：

$('#event1-btn-451').click(function () 
    var _this = $(this);
    _this.fadeOut(200, function () 
        _this.toggleClass('btn-primary btn-success').html('Success!').fadeIn(200).delay(2000).fadeOut(200, function () 
            console.log('c');
            _this.toggleClass('btn-success btn-primary').html('Add Event').fadeIn(200);
        )
    );
);

使用 callback function 的 jquery fadeOut()

【讨论】：

非常类似于 Toni 对所需链接的响应，但我想知道 console.log('c) 是干什么用的？