es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo hago que algo en lo que hago clic se desvanezca y después aparezca antes de ir a otro sitio web vinculado en la página?
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes lograr este efecto utilizando jQuery. Aquí tienes un ejemplo:

    // Desvanecer al hacer clic en un enlace
$('a').click(function(e) {
  e.preventDefault(); // Evita que el enlace redireccione
  var url = $(this).attr('href'); // Obtiene la URL del enlace
  $('body').fadeOut(500, function() { // Desvanece toda la página
    window.location.href = url; // Redirecciona a la nueva URL
  });
});

// Aparecer al cargar la página
$(document).ready(function() {
  $('body').fadeIn(500); // Aparece la página nueva
});

    En este ejemplo, comenzamos seleccionando todos los enlaces en la página utilizando $('a'). Luego, agregamos un escuchador de eventos de clic a cada enlace utilizando .click(). Dentro del escuchador, evitamos que el enlace redireccione utilizando e.preventDefault(). Luego, obtenemos la URL del enlace utilizando $(this).attr('href').

    A continuación, utilizamos $('body').fadeOut(500) para desvanecer toda la página durante un período de 500 milisegundos (medio segundo). También pasamos una función de devolución de llamada que se ejecuta una vez que se completa la animación. En esta función, utilizamos window.location.href para redirigir a la nueva URL.

    Finalmente, utilizamos $(document).ready() para agregar un escuchador para cuando la nueva página haya terminado de cargarse. Dentro de este escuchador, utilizamos $('body').fadeIn(500) para aparecer la nueva página durante un período de 500 milisegundos.

    Ten en cuenta que este código asume que estás utilizando jQuery, por lo que deberás incluir la biblioteca de jQuery en tu archivo HTML. Puedes hacer esto agregando la siguiente línea a tu etiqueta <head>:

    html

Comments are closed.