Como hacer lo siguente en jquery

[adryan310]

Saludos amigos del foro,

Estoy practicando en mi tiempo libre un poco de jquery, resulta que tengo un div que cuando lo muestro me sale un overlay y un gif en el centro junto con un mensaje, es esto:

Código HTML:

<div class="contact-modal show">
        <div class="loading show" id="div_message">
            <img src="images/sending.gif">
            <span>enviando</span-->
        </div>
</div>
<div class="contact-modal-overlay show"></div>
 

Cuando presiono un boton en jquery envio unas variables por ajax a un PHP e imprimo lo que me devuelva dicho archivo, todo esto me funciona bien, pero yo quiero que el div donde esta el GIF se quede por al menos unos 5 segundos y seguidamente tanto el GIF como el <SPAN> que dice ENVIANDO desaparezca y se muestre otra imagen y otro <SPAN> y esto ultimo se quede visible otros 5 segundos y despues se cierre el overlay.

Este es mi codigo JQUERY que dicho sea de paso me funciona bien, pero el GIF pasa muy rapido, como hacer para que se quede 5 segundos mientras se envia, y cuando ya la tenga respuesta mostrar esa respuesta durante otros 5 segundos ?

Código Javascript:

$.ajax({
     data:  parameters,
     url:   '../mail.php',
     type:  'post',
     beforeSend: function () {
            $(".show").css("display","block");
     },
     success:  function (response) {
            $('#div_message').empty().html('<img src="images/yes.png"><span>'+response+'</span>');
            setTimeout(function() {
                    $(".show").css("display","none");
                    $(":text").val("");
                    $("#txtPhone").val("");
                    $("#contactformsubmit").blur(); 
            },5000);
      }).fail( function( jqXHR, textStatus, errorThrown ) {
               window.console.log('El error es: ' + textStatus)
      });
 

Muchas gracias por la ayuda que me puedan brindar