Question

I’m having a small problem with replaceWith fadeIn and fadeOut functions:

$('#form').fadeOut(300, function() {
    var message = 'some message';
    $(this).replaceWith($(message).fadeIn(300, function() {
        var t = $(this);
        setTimeout(function() {
            t.fadeOut(300, function() {
                location.reload();
            });
        }, 4000);
    }));
});

The form fades out but nothing else happens – it removes the form but replaces it with nothing.

Any idea what might be going wrong here?

It’s actually the part of the object literal – which goes like this:

var formObject = {
submitFadeOutReload : function(url, arr) {      
    jQuery.post(url, arr, function(data) {
        formObject.submitReplaceReload(data.message);
    }, 'json');
},
submitReplaceReload : function(message) {
    if (message !== '') { 
        formObject.objForm.fadeOut(300, function() {
            $(this).replaceWith($(message).fadeIn(300, function() {
                var t = $(this);
                setTimeout(function() {
                    t.fadeOut(300, function() {
                        $(this).replaceWith($(clone).fadeIn(300));
                    });
                }, 2000);
            }));
        });
    }
}
};

Answer 1

Ok – problem solved!

It appeared that the response from the $.post() call was a plain text without any wrapper (span, div) therefore it could not be used as an element. Once I’ve wrapped the content with the span – it all worked just fine.