Reputation: 32227
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?
Note: After the first click, the code works exactly how I want it to. The very first click is the problem.
Upvotes: 6
Views: 15862
Reputation: 906
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/
Upvotes: 9