6

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

rlemon
  • 17,518
  • 14
  • 92
  • 123
Gary B
  • 143
  • 1
  • 9
  • Just to clarify, max value css opacity is 1 not 100. – A. Wolff May 06 '13 at 12:55
  • don't know how well it would work but an idea I just had was instead of harcoding the timing of when to change the opacity, you could create a function that runs every x seconds which toggles the nearest image's opacity? Then it would work regardless of time and it would just be the animation steps that would be hardcoded. Just an idea, it might perform poorly because of how many images there are. – martincarlin87 May 06 '13 at 13:10
  • Thanks. I see what you mean but problem with this animation is that it needs to be millisecond precise. Thats for having a look – Gary B May 06 '13 at 16:25

1 Answers1

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.

A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • I see what you mean roasted. Yes this would work. If there is no other may I have to reanimate it in one animate callback function but wondering if there is a simpler fix for the animation speed when inactive. such as pausing animation when it is not active or the circle moving at a different speed when the page is off focus. Or even forcing the speed to stay the same when inactive. I noticed that it seems ok in safari but not in other browsers. – Gary B May 06 '13 at 14:13
  • I noticed this solution to a similar problem. I was wondering if and how I could implement this into my jQuery. Thankshttp://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome – Gary B May 06 '13 at 18:04