jQuery Fade In and Out With Page Load

Question

I wonder whether someone may be able to help me please.

I know that to some this will be a very basic question, and my apologies, but I've only just started to use jQuery so please bear with me.

From working through a tutorial here I'm using the code below to be triggered on a Submit button.

$(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>

The code works, but I'm having a little difficulty at the end of my script, here to be more precise:

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

This correctly fades the page out after 2 seconds, but I'd now like to fade my page back in after a short delay.

I've read a number of posts on this site and tried to incorporate the following:

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

But somewhere along the lines I've done something wrong because the page now fails to fade out or in, but I have to be honest and say I'm not quite sure what I've done wrong.

I just wondered whether someone could perhaps take a look at this please and let me know how I can incorporate my existing code and then add a time delay before fading back in.

Many thanks and kind regards

Answer 1

There are numerous solutions. That is if I understood your question correctly. However after looking at your code, I'd say the following code fragment may help.

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

I believe this should work just fine.

If you are trying to let the page fade in exactly after the completion of retrieving the data from the server, try using the "complete" event implemented in the $.ajax call.

I hope that helps :) Good luck

EDIT: @torazaburo suggested a more subtle solution.

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