jQuery fadeOut => replaceWith =>淡入

时间:2011-09-13 13:30:29

标签: jquery fadein fadeout 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);
            }));
        });
    }
}
};

2 个答案:

答案 0 :(得分:2)

不确定你想要做的一切,但这有望让你走上正确的路线。你的脚本中的一个关键问题是$(“新消息”)。您需要在动态添加时创建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

答案 1 :(得分:0)

好的 - 问题解决了!

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