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?
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>