Question

我正在尝试按下按钮以快速淡出按钮，更改其类别和内容，淡入，然后反向恢复到原始状态。

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

$('#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);

第一行本身工作正常，但如果我包含第二行全部它会淡出，用原始颜色淡化相同的“添加事件”按钮，然后在2s延迟后再做同样的事情。

JSFIDDLE

第一次实际发布在这里虽然当然像很多我已经用过这么多的答案了！

Answer 1

我会使用jQuery animate方法代替。这包括在内。

Change text (html) with .animate

Answer 2

请试试这个：

$('#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);
        })
    });
});

使用jquery callback function

的fadeOut()

Answer 3

这种动画必须链接，如下所示：

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

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

3 个答案: