Jquery addClass not working on mobile phones-CodePudding

So I'm trying to make an animation starts when is visible on the viewport, It works, but the problem is that it only works on desktop, on mobile phone don't.

I've seen a lot fo questions like this on stack but it looks like there are no answers, like this, is from 2014 Jquery addClass not working on mobile browser with 0 answers.

Here is my code

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

any idea?

CodePudding user response：

Best solution is to use delay i think with setTimeout function.

$(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>