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