Error with Javascript / Jquery timing in inactive tabs

Question

I have recently took on the task of building a animation in Javascript / jQuery. The animation consists of a circle moving around the london tube map. Each time it passes a station, the station name is underlined.

I am still working on refining it and noticed that when the tab is inactive if messes the timing of the sequence when coming back to the page. Because I am embedding it inside an iframe It does not seem to work when I use $(window).focus() or $(window).blur().

I have animated the circle using jQuery animate function and simply made the opacity 0 on all of the lines under the text and put delays on them for them to animate the opacity to 100. I have put a link below to display the animation as it is. Still issues with the animation which I currently tweaking but I not sure how to fix the inactive tab problem. Any help woud 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 animate callback function, but you will have to recode 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 all.