jQuery 淡出 => 替换 => 淡入答案

【问题标题】：jQuery fadeOut => replaceWith => fadeInjQuery 淡出 => 替换 => 淡入
【发布时间】：2011-09-13 13:30:29
【问题描述】：

我在使用 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);
            }));
        });
    }
}
};

【问题讨论】：

如果你只是用文本替换它为什么不直接做$(this).html(message).fadeIn()
我不想替换表单的内容 - 我想替换表单。

标签： jquery fadein fadeout replacewith

【解决方案1】：

不确定您要尝试做的所有事情，但这有望使您走上正确的道路。您脚本中的一个关键问题是 $("new message").动态添加时需要创建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。

【讨论】：

再说一遍——和上面一样——我不想替换元素的内容——我想替换整个元素。
感谢@Timbo - 不幸的是它似乎不起作用。没有错误 - 没有 - 只是淡出表单，没有别的
你用的是它自己的吗？它需要在 html 文档的上下文中 - div 需要一个父元素...看看它在这里工作：jsfiddle.net/GXDhu
谢谢 Timbo - 非常感谢 - 我已经更新了上面的代码 - 因为它是对象文字的一部分 - 如果你看看这张票的补充。 'message' 从 $.post() 调用中接收并作为参数传递给第二个方法。

【解决方案2】：

好的 - 问题解决了！

$.post() 调用的响应似乎是没有任何包装（span、div）的纯文本，因此它不能用作元素。一旦我用跨度包装了内容 - 一切都很好。

【讨论】：