Error while javascript / jquery synchronization in inactive tabs

Question

Recently, I took on the task of creating animations in Javascript / jQuery. The animation consists of a circle moving around a map of the London tube. Each time he passes the station, the name of the station is underlined.

I am still working on updating it and noticed that when the tab is inactive, if it ruins the synchronization of the sequence when returning to the page. Because I embed it inside an iframe. It doesn't seem to work when I use $(window).focus() or $(window).blur() .

I animated the circle using the jQuery animation function, and just made the opacity 0 on all lines below the text and delayed them so that they animated the opacity to 100. I posted the link below to display the animation as it is. There are still problems with the animation I'm setting up right now, but I'm not sure how to fix the problem with the inactive tab. Any help would be great.

withoutframe: http://www.gbutlercreative.co.uk/london/index.html

with frame http://www.gbutlercreative.co.uk/london/frame.html

Answer 1

I think you could use the animate callback function, but you have to transcode all your logic:

 $(".icon") .animate({left:'+=23px',top:'+=23px'},500,'linear',function(){$(".Chesham").animate({opacity:1},10);}) .animate({left:'+=22px'},500,'linear',function(){$(".Chalfont").animate({opacity:1},10);}) 

Do the same for everyone.