Skip to main content
se añadieron 314 caracteres en el cuerpo
Origen Enlace
gPH
  • 107
  • 1
  • 12

Os vengo a molestar tengo la siguiente animación que desaparece en x segundos, pero no puedo darle validación al cierre por si se desea cerrarloestá validando el cierre [x] quiero dar la posibilidad de cerrar el mensaje manualmente, pero no funcioname está funcionando.

$(document).ready(function() {
        $('.n2'response').fadeIn(500).delay(6000).fadeOut(500);
    $(".dismiss").click(function(){
       $(".n2"response").fadeOut(500);
});
});
.n2response {
    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="n2">class="response">
  <span class="dismiss"><a title="dismiss this notification">X</a><class="dismiss">X</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non.</p>
</div>

Ahora esta animación os quieroEl error

Al adaptar la animación a la respuesta de AJAX perode 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 tiene que os vincularrecibe una petición o usarlo como un código normal.

Este es mirespuesta por medio de AJAXajax tomando ejemplos en la siguiente fuente endeos

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;         
    });
  });

Os vengo a molestar tengo la siguiente animación que desaparece en x segundos, pero no puedo darle validación al cierre por si se desea cerrarlo manualmente, no funciona.

$(document).ready(function() {
        $('.n2').fadeIn(500).delay(6000).fadeOut(500);
    $(".dismiss").click(function(){
       $(".n2").fadeOut(500);
});
});
.n2 {
    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="n2">
  <span class="dismiss"><a title="dismiss this notification">X</a></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non.</p>
</div>

Ahora esta animación os quiero adaptar a la respuesta de AJAX pero no se, si se tiene que os vincular o usarlo como un código normal.

Este es mi AJAX tomando ejemplos en la siguiente fuente endeos

  $(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;         
    });
  });

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;         
    });
  });
Origen Enlace
gPH
  • 107
  • 1
  • 12

Cómo adaptar animación en mensaje de respuesta de AJAX

Os vengo a molestar tengo la siguiente animación que desaparece en x segundos, pero no puedo darle validación al cierre por si se desea cerrarlo manualmente, no funciona.

$(document).ready(function() {
        $('.n2').fadeIn(500).delay(6000).fadeOut(500);
    $(".dismiss").click(function(){
       $(".n2").fadeOut(500);
});
});
.n2 {
    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="n2">
  <span class="dismiss"><a title="dismiss this notification">X</a></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non.</p>
</div>

Ahora esta animación os quiero adaptar a la respuesta de AJAX pero no se, si se tiene que os vincular o usarlo como un código normal.

Este es mi AJAX tomando ejemplos en la siguiente fuente endeos

  $(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>';