jquery button content change and back again

Question

I'm trying to achieve a simple feedback on a button press to fade out the button quickly, change its class and content, fade in then do the reverse back to its original state.

This is the code I thought would work fairly simply.

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

The first line by itself works fine but if I include the second line all it does it fadeout, fadein the same 'Add Event' button with the original color, then do exactly the same thing again after the 2s delay.

JSFIDDLE

First time actually posting here though of course like many I've used this for so many answers already!

Answer 1

I would use the jQuery animate method for this instead. That was covered here.

Change text (html) with .animate

Answer 2

Please try this:

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

use callback function of jquery fadeOut()

Answer 3

This kind of animation must be chained, like this:

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