2

Creando una pagina web me surgió un problema. Con jquery implemente cambios de CSS.

En resumen es una imagen dentro de un <a> (enlace a una pagina interna). La idea es que al dar clic sobre la imagen el tamaño aumente y se oscurece todo lo restante visible a exepcion de la imagen. Lo anterior dicho lo logre pero no es apreciado ya que al dar clic la dirección a la pagina interna es muy rápido. Mi pregunta es,

¿Como puedo determinar un tiempo posterior al click sobre a para así ver el efecto del CSS modificado?

Busque y encontré que seria con el método setTimeout(), pero no logro dar con el código correcto. Disculpen la ignorancia sobre el tema y si no me exprese correctamente. Gracias :)

PD: acepto correcciones de todo tipo, estoy empezando en esto.

Code JS:

$(document).ready(function() {

    'use strict';

    // Superior a 1400px
    if($("body").width() >= 1400){
      
        // Aumentar imagen al dar click en a
        $('.img-prota').click(function(){
            $(this).css({"transform": "scale(1.1)"});
            $('img').not(this).fadeTo("fast",0.50,"swing");//Desaparece en un tiempo determinado
            $(this).html();
        });
        
        // Cambiar de color al pasar puntero por a
        $('.img-prota').on({
            click:function(){
                $(".letras").css({"color":"#dd0a0f", "transition": "0.6s ease-in-out all"});
            },
            mouseenter:function(){
                $(".letras").css({"color":"white", "transition": "0.6s ease-in-out all"});
            },
            mouseleave:function(){
                $(".letras").css({"color":"#212529", "transition": "0.6s ease-in-out all"});
            }
        });
    } 
});

2 respuestas 2

1

Puedes valerte de:

  • El método preventDefault() para que el navegador no vaya inmediatamente al destino del link, que seria el proceso normal de un link y en esta ocación lo haremos manualmente más adelante.
  • Un timer, mediante setTimeout() para, un tiempo después, realizar la acción e ir al destino de dicho link.

El ejemplo a continuación demora intencionalmente 2 segundos antes de procesar el vínculo, mientras que hace parte de tus efectos visuales en el resto de <a>'s presentes.

$(function(){
    $("a").click(function(evt){
        evt.preventDefault();
        var link = $(this).attr("href");
        setTimeout(function() {
            window.location.href = link;
        }, 2000);

        $('a').not(this).fadeTo("slow", 0.15, "swing");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://es.stackoverflow.com/a/447427/21">Mi respuesta a tu pregunta</a><br />
<a href="https://es.stackoverflow.com/q/447404/21">Tu pregunta</a><br />
<a href="https://es.stackoverflow.com">es.stackoverflow.com</a>

1
  • 1
    Mil gracias! Muy claro explicado :) Commented el 27 abr. 2021 a las 13:32
1

Te recomiendo crear una función con lo que ya tienes y de ese modo la invocas dentro de este otro código, reemplazando el alert que yo te he dejado.

function myFunction() {
  setTimeout(function(){ alert("Hola"); }, 3000);
}
<html>
<body>

<p>Al darle click al botón, pasarán 3 segundos y se ejecutará el Alert.</p>

<button onclick="myFunction()">Presiona aquí</button>

</body>
</html>

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.