Estoy enfrentando un problema en jquery mientras uso el evento hover listener, el código solo funciona en el escritorio mientras que en el móvil no puedo hacer que funcione con el hover listener. Así que solo quiero implementar la función de clic en lugar de hover cuando el sitio está siendo se muestra en el móvil y se desplaza en la PC/computadora portátil. Estoy compartiendo mi código a continuación. También estoy usando blastjs y animate.css para animación de texto.
Elemento de encabezado para la animación.
<h2>About Me..</h2>código jquery
$(document).ready(function () { $("h2").blast({ delimiter: "character", tag: "span", }); var pageAbout = $(".about_wrapper"); $(".blast").on("hover", function () { var el = $(this); $(this).addClass("animated rubberBand"); $(this).one( "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () { el.removeClass("animated rubberBand"); } ); }); });Puede verificar el ancho del dispositivo antes de hacer que el detector de eventos
$(document).ready(function () { $("h2").blast({ delimiter: "character", tag: "span", }); // You choose the event depending on the screen width let event; screen.width > 400 ? event = 'hover' : event = 'click' // var pageAbout = $(".about_wrapper"); $(".blast").on(event, function () { var el = $(this); $(this).addClass("animated rubberBand"); $(this).one( "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () { el.removeClass("animated rubberBand"); } );}); });
Si screen.width no era adecuado, puede encontrar algunas formas de detectar el tipo de dispositivo en esta discusión