Element Mover

An Easy Way to Move

Element Mover is a flexible and versatile jQuery plug-in that gives you control to move HTML elements.

What Happens

Element Mover animates 2 DOM elements to a specified anchor point on the page. It's popular functionality is a battle sequence that animates 2 div's to engage in a battle clashing repeatedly at certain point.

How to Use

Assign an ID to two elements (#move1 & #move2) on the DOM that are both visible in the same pane. Then use an ID set an anchor point (#anchor) on the page. Lastly, a trigger event is needed. This point can be any of the existing ID's above or a completely new point (#trigger if a new point) on the page. When the trigger point is activated the elements will move toward the anchor point on the page.

Behind the Scenes

Element Mover uses graphical principles to elegantly move elements on the page. It calculates the height, centre point and relative coordinates of the #move and #anchor elements. With this information a trajectory can be used to animate the #move elements in the direction of the #anchor.