Question

I have a problem with jquery and position().

I want to move a text element <div id="text"> to sit onto another element on an event.
The other element looks like this:

<div id=pic><img src=pic.jpg></div>

The jquery i’m using to position it is this:

var pos = $('#pic').offset();
$('#text').animate({ top: pos.top, left: pos.left }, 0);

Now for some reason the #text is getting displayed way further over to the right and below the actual img div.

Any idea what’s causing this?

Answer 1

Does #text have position: absolute set? Animating the top and left properties won’t have the expected effect otherwise. .offset returns the top and left relative to the document, but .animate modifies the top and left style properties, which are dependent upon the position property.