CODEWITHSUNDEEP
javascriptjqueryhtmljquery-animatetransition
Dested
Dested

Reputation: 6433

Animate moving an element between two divs

Im wondering what my options are for taking an element from one div and placing it in another, animating the transition. Both parents are position:absolute, the element is position relative. I have a few ideas, none of them too clean. There does not seem to be a standard way of doing this, curious if anyone has any insight into the cleanest way to implement this behavior.

I dont have a current implementation, but what im anticipating doing is capturing the current physical location of the element... somehow determine the proposed position in the new parent, pop the element out of the old parent, create a new element outside of the two divs, transition (left,top) between these two points, onComplete insert into the new parent. Im fearing this is my only solution. Any thoughts on possible ways to simplify?

Upvotes: 1

Views: 1172

Answers (1)

Judson Terrell
Judson Terrell

Reputation: 4306

Use jquery .animate. You will animate a 3rd div that is the same size etc, from the offset x and y of one to the other basically.

Let the new div hold the same coordinates as the one you are moving from.

Then in your script get the coordinates of the one you are moving to. Animate with left and top also opacity and you can make it fade in while moving then on the callback fade out.

If you need code let me know.

Judson

Upvotes: 4

Related Questions