3

I have illustrated my problem in the following Fiddle; http://jsfiddle.net/6CTMs/

The background of the wrapper is an image with a white hole in the middle. This hole is then covered by the block element.

Now I want to animate the background and the block moving up. I'm simultaneously animating the background position (via the included background position animation plugin) and the top attribute of the block element.

However, at least on my Chrome 21.0.1180.79 on Win7, these two animations are not entirely in sync. It seems every other frame of animation, a white band (revealing a one-pixel high slice of the hole underneath) shows at the bottom, and every other frame it doesn't.

How can I avoid this?

Including the background image in a child element and only animating the top attribute of that is not an option in my case. I also can't make the element one pixel taller or any 'hack' like that - the dimensions and animations need to be precise.

As a sidenote, I think that this issue may perhaps be related to an earlier question of mine, which never fully got resolved.

EDIT: I've forked the Fiddle here; http://jsfiddle.net/3r26H/1/ Seems to work but it looks like it leaves one pixel off at the end of the animation. I also don't know if this creates new issues in non-Webkit browsers. How kosher is this solution?

Community
  • 1
  • 1
Emphram Stavanger
  • 4,158
  • 9
  • 35
  • 63

1 Answers1

3

According to this thread : JQuery synchronous animation it's impossible to sync two animations in JQuery. What you can do through, is animate the whole thing "by hand", using requestAnimationFrame and making the right computations at each frame so that both elements are sync.

Community
  • 1
  • 1
bperson
  • 1,285
  • 10
  • 19
  • I was able to make this Fiddle using that logic and the step function from the answer to the question I linked, and it seems to work on my Chrome apart from the fact that the animation leaves 1 pixel off once it's finished; http://jsfiddle.net/3r26H/1/ -- any idea on how cross-browser reliable this effect is? – Emphram Stavanger Aug 26 '12 at 16:54
  • 1
    it does not seem to work for me :/ (Mac OS X Lion - Chrome & Firefox). So for your question I would say it's not reliable :) I'm working on another fiddle to show you how I would have done it (and if what I thought at first is really a good solution :D ) – bperson Aug 26 '12 at 17:05
  • Looks cool, and works for me too! What's the backwards compatibility of this solution? – Emphram Stavanger Aug 26 '12 at 17:28
  • Also, setting the animation speed seems a bit mystifying to me; 20000 milliseconds is my set time. How do I vary that with your solution? – Emphram Stavanger Aug 26 '12 at 17:31
  • 1
    If by "backward compatibility" you mean if this code will work on older browser : it should work but I haven't tested it :/ You should take a look here if you want a better polyfill for the requestAnimFrame function : http://paulirish.com/2011/requestanimationframe-for-smart-animating/ – bperson Aug 26 '12 at 17:31
  • If the tech was in nightlies and dev builds in 2011, I'm guessing `requestAnimationFrame` isn't old enough to be the sole solution. But then again, with an old browser I'm okay with the 1 pixel error. I'll tinker around with `requestAnimationFrame` support detection to provide the original jQuery fallback. – Emphram Stavanger Aug 26 '12 at 17:37