JQuery：第二个.html（）调用忽略了之前的.css（），delay（）＆amp; fadeIn（）调用

Question

警告：Newbe问题。 ： - ）

使用Ajax，我将表单数据发送到MVC3控制器并让Json返回。

成功之后，我正试图：

1. 存储原始表单div内容（调用.html()）
2. 将div形式的html替换为Json结果（这是一个字符串 - “成功”）
3. 延迟3秒
4. 将div格式的html替换为原始html
5. 淡入原始表格

一切正常。但是，当成功html显示时，它会立即被第二个.html()调用吹走，该调用将原始表单html放回到表单div中。中间的.delay(3000)和.css('display','none')来电似乎被忽略了。

证明：如果我注释掉以下代码行（来自下面的源代码），则会显示Success消息。

$('#frmSignup').css('display', 'none');
$('#frmSignup').html(original).fadeIn();

我找了类似的案例和解决方法，但找不到。如果这很明显，请不要那么打败我。 ; - ）

提前感谢您的协助！

来源部分：

$（'form'）。live（“submit”，function（event）{     event.preventDefault（）;

var form = $(this);
var original = $('#frmSignup').html();

$.ajax({
    url: form.attr('action'),
    type: "POST",
    data: form.serialize(),
    beforeSend: function () {
        $('#goarrow').fadeOut();
        $('#ajaxloader').fadeIn();
    },
    complete: function () {
        $('#ajaxloader').fadeOut();
        $('#goarrow').fadeIn();
        //$('#Email').val("");
    },
    success: function (data) {
        if (data[0]) {
            $('#frmSignup').css('display', 'none');
            $('#frmSignup').html(data[1]).fadeIn().delay(3000);
            $('#frmSignup').css('display', 'none');
            $('#frmSignup').html(original).fadeIn();
        } else {
            $("#ajaxresponse").html(data[1]);
            //$.validator.unobtrusive.parse("form");
        }
    },
    error: function (jqXhr, textStatus, errorThrown) {
         alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
    }
});
return false;

}）;

Answer 1

我没有使用.delay（）的经验，但你可以使用setTimeout

$('#frmSignup').css('display', 'none');
$('#frmSignup').html(data[1]).fadeIn();
setTimeout(function(){
    $('#frmSignup').css('display', 'none');
    $('#frmSignup').html(original).fadeIn();
},3000);

或者根据jQuery文档尝试使用延迟链接元素。

也可以使用.hide()

而不是使用.css（'display'，'none'）。