Como hacer lo siguente en jquery

[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