当用户单击submit按钮时，jQuery多阶段表单动画

如何使jQuery多阶段表单在成功提交和结果淡入时淡出？我将它与jQuery表单插件一起使用(http://jquery.malsup.com/form/)

这是处理所有提交的jQuery表单代码

<script type="text/javascript">

// prepare the form when the DOM is ready 

$(document).ready(function() { 
var options = { 
    target:        '#t5',  
    beforeSubmit:  showRequest,  
    success:       showResponse   
}; 

// bind to the form's submit event 

$('#t5_booking').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
    }); 
});  

// pre-submit callback 

function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    // alert('About to submit: \n\n' + queryString); 
}

// post-submit callback 

function showResponse(responseText, statusText, xhr, $form)  { 
} 
</script>

//当DOM就绪时准备表单
$（文档）.ready（函数（）{
变量选项={
目标：“#t5”，
提交前：showRequest，
成功：showResponse
}; 
//绑定到表单的提交事件
$（'#t5_'）。提交（函数（）{
$（此）.ajaxSubmit（选项）；
返回false；
}); 
});  
//预提交回调
函数showRequest（formData、jqForm、options）{
var queryString=$.param（formData）；
//警报（'即将提交：\n\n'+queryString）；
}
//提交后回拨
函数showResponse（responseText，statusText，xhr，$form）{
} 

这是它与之一起工作的多阶段形式：

---

嗯，我在JSFIDLE上修改了您的一些代码，但我不确定它是否完全是您想要的：

在最后一步元素下面添加了一个id为“results”的新元素后，我向JavaScript中添加了以下代码

$('#results').hide();
$('#last-step input').click(function() {
    $.ajax({
        url: 'http://fiddle.jshell.net/syyFV/show/light/',
        success: function(data) {
            $('#last-step').fadeOut(300, function() {
                $('#results').text(data).fadeIn(300);
            });
        }
    });
});

…在以下初始化块下面：

// init
$('#t5_booking > div').hide().append(navHTML);
$('#first-step .prev').remove();
$('#last-step .next').remove();

因此，当按下按钮时，加载URL的内容，然后淡出“最后一步”元素，并且（在本例中）将数据放入“结果”元素，然后淡入。请注意，您可能希望使用AJAX请求获取一些XML，然后在显示之前对其进行格式化，而不是请求整个（样式化）页面

例如：

编辑：第二眼，我意识到；如果结果作为表单提交的响应返回，您可以将我给您的一些动画代码移动一点。动画和数据处理也可以在

showResponse

函数中完成，使用

responseText

作为要显示的数据

你发布的代码会是哪一个

function showResponse(responseText, statusText, xhr, $form)  {
    $('#last-step').fadeOut(300, function() {
        $('#results').text(responseText).fadeIn(300);
    });
}

---

如果将代码移动到jQuery表单showResponse函数中，代码会是什么样子？