jQuery .offset() doing strange things
I want to put a translucent screen over a div so I can show an image on top of the screen without the div contents being a distraction. The main div could move around so I read its current width, height, and offset with jQuery and then apply those to the screen. But the screen appears in a different place each time!
There's a jsfiddle here: http://jsfiddle.net/bdWW3/1/
When you click Screen On the screen is applied. When you click Screen Off the screen is removed. When you click Screen On again the screen is applied, but it appears in a different place, no longer exactly over the canvas div. But console.log shows exactly the same parameters being put into the jQuery offset() call!? The new position seems to depend on where the element was before. The offset given to position() is added to something, but http://api.jquery.com/offset says that the coordinates passed to the offset() method are "integers indicating the new top and left coordinates for the elements."
Does anyone see what's going on?
Thanks