1

Os vengo a molestar tengo la siguiente animación que desaparece en x segundos, pero no se está validando el cierre [x] quiero dar la posibilidad de cerrar el mensaje manualmente, pero no me está funcionando.

$(document).ready(function() {
		$('.response').fadeIn(500).delay(6000).fadeOut(500);
    $(".dismiss").click(function(){
       $(".response").fadeOut(500);
});
});
.response {
    display: none;
    opacity: 0.9;
    position: absolute;
    bottom: 15px;
    left: 15px;
    margin: 0;
    padding: 0;
    width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="response">
  <span class="dismiss">X</span>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non.</p>
</div>

El error

Al adaptar la animación a la respuesta de AJAX de la siguiente manera el div de la animación se ejecuta automáticamente al refrescar la página o abrir directamente la página y no debe hacer así debido a que este se debe ejecutar solo si se recibe una petición o respuesta por medio de ajax

Ejemplo:

Este es mi AJAX tomando ejemplos en la siguiente fuente endeos

$(document).ready(function() {
        $('.response').fadeIn(500).delay(6000).fadeOut(500);
    $(".dismiss").click(function(){
       $(".response").fadeOut(500);
});
});
  $(document).ready(function() {
    $(document).on('submit', '#post', function() {
      var data = $(this).serialize();
      $.ajax({          
        type : 'POST',
        url  : 'post.php',
        data : data,
        success :  function(data) {                 
          $(".response").html(data);       
        }
      });         
      return false;         
    });
  });

Y obtengo respuesta

<div class="response"><!-- Respuesta AJAX --></div>';
4
  • Mi pregunta es lo qe tu deseas es que al darle click a la x se cierre el mensaje de alerta cierto? Commented el 28 nov. 2017 a las 4:51
  • @Mariano El div de la respuesta quiero que aparezca el error o la respuesta de la misma forma como se ejecuta el primer código es decir que desaparezca el mensaje por determinado x segundos y a la vez dar la posibilidad de cerrar el mensaje manualmente [x] a eso se refería?
    – gPH
    Commented el 28 nov. 2017 a las 9:42
  • @Mariano se refiere a esto <div class="response"><!-- Respuesta AJAX --></div>'; ? Si es eso es la respuesta que emite ajax desde su función $(".response").html(data); puede ser diferente mensajes de respuesta, no comprendo aún que debo aclarar :)
    – gPH
    Commented el 28 nov. 2017 a las 9:47
  • @Mariano Ahora he editado mi pregunta aclarando los errores del mismo, espero poder haber aclarado...
    – gPH
    Commented el 28 nov. 2017 a las 10:06

2 respuestas 2

0

Cuando invocas delay sobre un elemento, éste afecta a toda su cola de animaciones. El fadeOut que intentas llamar manualmente con la X no se ejecuta de inmediato sino que entra a la cola que está esperando por el término de delay.

Lo óptimo sería poder cancelar el delay cuando presiones X e interrumpir ese período de espera... lo malo es que delay no se puede cancelar según la documentación:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited —it doesn't, for example, offer a way to cancel the delay— .delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Por lo mismo, hagámosle caso a la documentación y usemos setTimeout para lograr el comportamiento deseado:

$(document).ready(function() {
    $('.response').fadeIn(500);
    
    window.setTimeout(function() {
      $('.response').fadeOut(500);
    },6000);
    
    $(".dismiss").click(function(){
       $(".response").fadeOut(500);
    });
    
   
});
.response {
    display: none;
    opacity: 0.9;
    position: absolute;
    bottom: 15px;
    left: 15px;
    margin: 0;
    padding: 0;
    width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="response">
  <span class="dismiss">X</span>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non.</p>
</div>

Para tu caso de uso sería mejor meter toda la animación dentro de la respuesta al post, porque de lo contrario pareciera que estás suponiendo que a lo más la respuesta demorará 6 segundos. Si demora 10 segundos, tu fadeOut impedirá que se muestre nada.

Segundo, si metes la respuesta en $('.response') desaparecerá la X y ya no podrás ocultar el div. Sería mejor que la respuesta fuera en el hijo p de $('.response').

Yo aplicaría el fadeIn justo antes de gatillar la petición, aprovechando de modificar el mensaje que contiene:

$(document).ready(function () {

    $(".dismiss").click(function () {
        $(".response").fadeOut(500);
    });

    $(document).on('submit', '#post', function () {

        var data = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: 'post.php',
            data: data,
            beforeSend: function () {
                $(".response").fadeIn(200);
            },
            success: function (response) {
                $(".response").html(response);
                window.setTimeout(function () {
                    $('.response').fadeOut(500);
                }, 6000);
            }
        });
        return false;
    });

});

Y de paso, contemplaría el caso de que la petición devolviera un error.

EDIT: intenté aplicar la respuesta a tu ejemplo en Ajax. Como ignoro si la pregunta original y la situación real tienen la misma estructura,terminé omitiendo el hecho de que llenar el DIV con la respuesta va a sobreescribir la X.

9
  • El código ajax que has proporcionado no me emite ninguna respuesta, no funciona.
    – gPH
    Commented el 28 nov. 2017 a las 10:48
  • Puede que la parte del ajax necesite usar beforeSend para mostrar el div de la respuesta. Pero esa es una parte complementaria. Tu pregunta original era por qué la X no ocultaba el div y te mostré que era a causa del delay. Voy a modificar la respuesta para usar beforeSend, pero no tengo cómo probarla usando los snippers de StackOverflow
    – ffflabs
    Commented el 28 nov. 2017 a las 10:58
  • Sigue lo mismo no emite ninguna respuesta, el editor sublime text me marca de color rojo esto ) del último cierre });
    – gPH
    Commented el 28 nov. 2017 a las 11:22
  • Tienes razón, ese cierre está de más. Acabo de quitarlo
    – ffflabs
    Commented el 28 nov. 2017 a las 11:27
  • funciona pero queda activado una notificación toca darle click en la [x] para que cierre ese aviso y no debería mostrase esa notificación por que no se a ejecutado ajax solo cuando ajax reciba algún error debe mostrarse, no se si puedas observar algo como referencia de esto y esto
    – gPH
    Commented el 28 nov. 2017 a las 11:37
0

Intenta con esto:

Dentro de la etiqueta a agregale el atributo href="#"

También al ejecutar el evento click en el div, puedes ocultar el span de esta manera:

$(".n2").hide();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.