Question

I have a form which has a save button. When the save button is clicked it runs ajax to save the form contents. That works. What I am having troubles with is the save button fadein fadeout. The text of the save button is “Save as Draft”. When clicked I would like it to fade out, change the text to “Draft saved at [time]” and then fade in to show that it was saved, and the time it was saved. After a few seconds I would like that button message to fade out and be replaced by the original “Save as Draft” button.

I’m thinking I have to nest the fades into functions, but my jquery fading talents are minimal and fading rapidly 🙂

Below is the success part of the ajax ….

success: function(data) {
    var date = new Date(),
    hours = date.getHours(),
    minutes = date.getMinutes();

    if (hours > 12) hours = hours - 12;
    if (minutes < 10) minutes = '0' + minutes;

    var save_draft = '<div id="save-button" class="button-clone">Save as Draft</div>';
    var draft_saved = '<div id="save-button" class="button-clone">Draft Saved at ' + hours + ':' + minutes + '</div>';

    $('#save-button').fadeOut(1000);
    $('#save-button').replaceWith(draft_saved);
    $('#save-button').fadeIn(1000);
    $('#save-button').fadeOut(1000);
    $('#save-button').replaceWith(save_draft);
    $('#save-button').fadeIn(1000);
}

Answer 1

Since each animation is async, you need to call any other method inside the callback function.

EDIT

Sorry, it wasn’t working. Adjusted with fadeIn too:

$('#save-button').fadeOut("slow", function() {
    $('#save-button').replaceWith(draft_saved);
    $('#save-button').hide().fadeIn(1000, function() {
        $('#save-button').fadeOut(1000, function() {
            $('#save-button').replaceWith(save_draft);
            $('#save-button').hide().fadeIn(1000);
        });
    });
});

Let me explain why this hide() is being needed:

When you fadeOut some element, jQuery puts display: none directly to that HTML. But you is replacing with another HTML (by replaceWith() method). But fadeIn() only fades elements that was hidden. So, we need to hide the new HTML and then the fadeIn() happens.