Jquery addClass 不适用于手机

Question

所以我试图让动画在视口上可见时开始，它可以工作，但问题是它只能在桌面上工作，在移动设备上phone 不行。

我在堆栈上看到了很多这样的问题，但看起来没有答案，像这样，来自 2014 年 Jquery addClass not working on mobile browser，有 0 个答案。

这是我的代码

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

有什么想法吗？

Answer 1

最好的解决方案是使用我认为带有 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>

Jquery addClass 不适用于手机

Jquery addClass not working on mobile phones

html

javascript

mobile

jquery