jQuery fadeOut => replaceWith => fadeIn

Question

У меня небольшая проблема с функциями replaceWith fadeIn и fadeOut:

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

Форма исчезает, но больше ничего не происходит - она ​​удаляет форму, но заменяет ее ничем.

Любая идея, что здесь может пойти не так?

Это на самом деле часть литерала объекта - который выглядит так:

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

Не уверен во всем, что вы пытаетесь сделать, но, надеюсь, это поставит вас в нужное русло.Ключевой проблемой в вашем скрипте была $ («новое сообщение»).Вам необходимо создать HTML при динамическом добавлении, например $("<p>Something</p>").

<div id="foo">my div</div>

$(document).ready(function() {
    $('#foo').fadeOut(300, function() {
        var $newElement = $('<div id="new div">new message</div>');
        $(this).replaceWith($newElement);
        $newElement.fadeIn(300, function() {
            document.location.reload();
        });
    });
});

Вкл. JSFiddle здесь.

Answer 2

ОК - проблема решена!

Оказалось, что ответ на вызов $ .post () был простым текстом без какой-либо обертки (span, div), поэтому его нельзя было использовать в качестве элемента. Как только я обернул содержимое в span - все заработало просто отлично.