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

[adryan310]

Gente, he estado investigando, ahora este es mi actual codigo:

Código Javascript:

function restore(){
  $("body").css("overflow", "auto");
  $('#div_message').empty().html('<img src="images/sending.gif"><span>enviando</span>');
  $(":text").val("");
  $("#txtPhone").val("");
  $("#contactformsubmit").blur();   
}
 
$.ajax({
   data:  parameters,
   url:   '../mail.php',
   type:  'post',
   success:  function (response) {
       $(".show").show();   //mostramos el overlay y lo que hay en el.
       $("body").css("overflow", "hidden"); // desactivamos el scrolling
       $("#div_message").delay(5000).hide(600); //mostramos el GIF por 5 segundos
       $('#div_message').empty().html('<img src="images/yes.png"><span>'+response+'</span>'); // colocamos el contenido nuevo
       $("#div_message").show(); // mostramos el nuevo contenido
                                         
    $(".show").delay(5000).hide(600); // cerramos el overlay definitivamente despues de 5 segundos.     
        setTimeout("restore()", 6000);  // al sexto segundo restauramos los campos y todo queda por defecto             
                                        
}
}).fail( function( jqXHR, textStatus, errorThrown ) {
                               window.console.log('El error es: ' + textStatus)
});
 

Esto me sirve pero a medias ya que me muestra la respuesta de ajax, pero no entiendo porque se va directo a eso si antes le estoy diciendo que me muestre el div donde se muestra el gif que dice enviando durante 5 segundos, alguna ayuda ?

[elporfirio]

Hola me gusto mucho tu reto para empezar la mañana

===

Ahora bien, yo soy mucho de separar todo en funciones y llamarlas cuando se necesite e hice algo similar a lo tuyo:

Código Javascript:

$(document).ready(function(){
  var $form = $('form');
  var posting;
  var divCargando = $(".cargando");
  var divOkay = $(".okay");
  var url = '/echo/json/';
  var datos;
  
  $form.on('submit', function(e){
    e.preventDefault();
    //Se muestra el cargando antes de enviar.
    mostrarLoading();
    
    var emailValue = $form.find('#email').val();
    datos = {json: JSON.stringify({email: emailValue})}
    
    posting = $.post(url, datos);
    posting.done(terminoEnvio);
    posting.fail(errorEnvio);
  });
  
  function terminoEnvio(result){
        //esperar 2 segundos despues de que se reciba la respuesta
       setTimeout(function(){
         
         ocultarLoading();
         mostrarOkay();
 
                    //esperar 2 segundos antes de ocultar el okay
         setTimeout(ocultarOkay, 2000);
       }, 2000);
  }
  
  function errorEnvio(error){
      alert('ocurrio un error');
      console.error(error);
  }
  
  function mostrarLoading(){
    divCargando.show("slow");
  }
  
  function ocultarLoading(){
    divCargando.hide("slow");
  }
  
  function mostrarOkay(){
    divOkay.show('slow');
  }
  
  function ocultarOkay(){
    divOkay.hide('slow');
  }
});
 

En cuanto a las imagenes yo las cargue desde el inicio, pero permanecen ocultas.

El html:

Código HTML:

<form>
     <input type="email" name="email" id="email" value="[email protected]" required>
     <button>
     Enviar email
     </button>
</form>
 
<div class="cargando">
  <img src="http://onatech.com.mx/images/loading-circle.gif" width="150">
  <br>
  Enviando ...
</div>
 
<div class="okay">
  <img src="https://static.mytaxi.com/images/layout-1/icons/success.svg" width="150">
  <br>
  Enviado correctamente.
</div>
 

EL CSS:

Código CSS:

.cargando, .okay {
  display: none;
}
 

y aquí un ejemplo funcionando:


https://jsfiddle.net/elporfirio/nhybxmj6/

Saludos.

====
https://blog.elporfirio.com

[adryan310]

Gracias elporfirio

Me sirvio de mucho tu ayuda, te dejo puntos amigo