Question

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

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

从完成教程here开始，我使用下面的代码在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();

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

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

非常感谢和亲切的问候

Answer 1

有很多解决方案。那就是我理解你的问题。但是在看了你的代码后，我会说下面的代码片段可能有所帮助。

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

我相信这应该可行。

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

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

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

$('body').delay(2000).fadeOut(500).delay(500).fadeIn(400).

jQuery淡入淡出页面加载

1 个答案: