CSS relative to fixed position - CSS transition

Question

Description

I'm trying to make a div look like it's growing from where it is. To do this I'm changing the position from relative to fixed which makes the first transition start from top:0, left:0 instead of the element's current top/left. How can I fix this to use the elements current offsets?

JS Fiddle

http://jsfiddle.net/ZjWkD/

Note: After the first click, the code works exactly how I want it to. The very first click is the problem.

Answer 1

Hello and thanks for the fiddle,

It looks like when you first set the css here, you had transitions on your target-div which was messing things up a bit, in addition to setting your initial position inside the click function.

$(this).css({
    position:'fixed',
    top:$(this).offset().top,
    left:$(this).offset().left
});

Setting the position of the target-div before the click function fires will position the div correctly, and applying the css without the animations on it will ensure that the target-div is in the right spot when the document loads (if you keep the animations on that target-div, even if you apply the starting css in $(document).ready it will load the page and run the animation rather than having the div start there).

I used a separate class for the animation and applied it only after the initial positioning was set (see .test class in fiddle below).

http://jsfiddle.net/Jag96/wdh4N/