Así que estoy tratando de hacer que una animación comience cuando está visible en la ventana gráfica. Funciona, pero el problema es que solo funciona en el escritorio, en el teléfono móvil no.
He visto muchas preguntas como esta en la pila, pero parece que no hay respuestas, como esta, es de 2014 Jquery addClass no funciona en el navegador móvil con 0 respuestas.
Aquí está mi código
// function to detect if an element is scrolled into view function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); }; // listen for scroll event $(window).scroll(function () { // check if element is scrolled into view if (isScrolledIntoView($('#don'))) { // element is scrolled into view, add animation class $( "#don" ).removeClass( "donut-segment" ).addClass( "donut-segment" ); } });¿alguna idea?
La mejor solución es usar el retraso, creo, con la función setTimeout.
$(function() { $('button').click(function() { setTimeout(function(){ $("#don").removeClass("donut-segment"); }, 50); setTimeout(function(){ $("#don").addClass("donut-segment"); }, 100); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="don" class="donut-segment"></div> <button>Test</button><br>