1

我想知道是否有人可以帮助我。

我知道对某些人来说这将是一个非常基本的问题，我很抱歉，但我才刚刚开始使用 jQuery，所以请多多包涵。

从这里的教程开始，我使用下面的代码在Submit按钮上触发。

$(document).ready(function(){
    $(this).scrollTop(0);
    $('#addlocation').submit(function(){

        //check the form is not currently submitting
        if($(this).data('formstatus') !== 'submitting'){

            //setup variables
            var form = $(this),
                formData = form.serialize(),
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 
                responseMsg = $('#saverecordresponse');

            //add status data to form
            form.data('formstatus','submitting');

            //show response message - waiting
            responseMsg.hide()
                       .addClass('response-waiting')
                       .text('Please Wait...')
                       .fadeIn(200);

            //send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data){

                    //setup variables
                    var responseData = jQuery.parseJSON(data), 
                        klass = '';

                    //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'response-error';
                        break;
                        case 'success':
                            klass = 'response-success';
                        break;  
                    }

                    //show reponse message
                    responseMsg.fadeOut(200,function(){
                        $(this).removeClass('response-waiting')
                               .addClass(klass)
                               .text(responseData.message)
                               .fadeIn(200,function(){
                                   //set timeout to hide response message
                                   setTimeout(function(){
                                       responseMsg.fadeOut(250,function(){
                                           $(this).removeClass(klass);
                                           form.data('formstatus','idle');
                                       });
                                   },1000)
                                    setTimeout(function() { 
                                    $('body').fadeOut();}, 2000); 
                                });
                    });
                }
            });
        }

        //prevent form from submitting
        return false;
    });
});
</script>

该代码有效，但我在脚本末尾遇到了一些困难，这里更准确地说：

setTimeout(function() { 
$('body').fadeOut();}, 2000);

这会在 2 秒后正确淡出页面，但我现在想在短暂的延迟后淡入我的页面。

我已经阅读了该网站上的许多帖子并尝试合并以下内容：

$(this).fadeOut().next().delay(500).fadeIn();

但是在某些地方我做错了，因为页面现在无法淡出或淡入，但我必须诚实地说我不太确定我做错了什么。

我只是想知道是否有人可以看看这个，让我知道如何合并我现有的代码，然后在淡入之前添加一个时间延迟。

非常感谢和亲切的问候

4

1 回答 1

0

有很多解决方案。那就是如果我正确理解了您的问题。但是，在查看您的代码之后，我会说以下代码片段可能会有所帮助。

setTimeout(function() { 
         $('body').fadeOut(400, function(){
              setTimeout(function(){
                   $('body').fadeIn(400);
              }, 500);
         });
    }, 2000);

我相信这应该可以正常工作。

如果您试图在从服务器检索数据完成后让页面完全淡入，请尝试使用 $.ajax 调用中实现的“完成”事件。

我希望这会有所帮助:) 祝你好运

编辑：@torazaburo 提出了一个更微妙的解决方案。

$('body').delay(2000).fadeOut(500).delay(500).fadeIn(400).
于 2012-06-29T16:19:09.457 回答