ajax, loading e resposta por tempo definido

olá pessoal fiz um ajax aqui está tudo funcionando.

ele valida com o jquery.validate, e chama o grava-usuarios.php

que salva no banco e também to exibindo uma div com um gif loading.gif, e escondendo ela depois de alguns segundos quando tenho o retorno do ajax. eu queria exibir uma div de resposta por exemplo 'usuario salvo com sucesso!' por alguns segundos tambem, mas ela exibe junto com efeito de fade do loading. como poderia criar uma condição que ela só exibiria depois que o loading foi oculto?

/ ajax usuarios do sistema /
$('#CadastroUsuario').validate({
rules: {
txtUsuario:{required: true},
txtSenha:{required: true, minlength: 6},
txtSenha2:{required: true,equalTo: "#txtSenha"},
txtEmail:{required: true, email: true},
},
messages: {
txtUsuario:{required: "Digite o seu nome de Usuario"},
txtSenha:{required: "Digite sua senha", minLength: "Sua senha deve conter, no mínimo, 6 Digitos"},
txtSenha2:{required: "Repita sua Senha",minLength: "Sua senha deve conter, no mínimo, 6 Digitos"},
txtEmail:{required: "Digite o seu e-mail para contato",email: "Digite um e-mail válido"}
},

 submitHandler: function(form){
 var dados = $(form).serialize();

 $('#carrega-ajax').show(); //exibe carregamento ajax

 $.ajax({
 type: "POST",
 url: "grava-usuarios.php",
 data: dados,
 success: function( data ){

 document.getElementById('CadastroUsuario').reset() //limpa formulario

 $('#carrega-ajax').fadeToggle(3000).hide(3000);//esconde carregamento

 $('#resposta').show('fast',function() { //imprime a resposta
 $('#resposta').empty().html(data);
 });
 $('#resposta').fadeToggle(3000).hide(20000); // esconde a resposta

 }
 });

 return false;
 }
 });