Menu
How can I animate from current position to center using position({of:,my:,at:})?
Is there any way to automate the process, or do I have to animate the CSS properties manually?
329
jQuery position() MethodThe position() method returns the position (relative to its parent element) of the first matched element. This method returns an object with 2 properties; the top and left positions in pixels.
The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").
The position() method is an inbuilt method in jQuery which is used to find the position of the first matched element relative to its parent element in the DOM tree. Syntax: $(selector).position()
Although both methods have some similarities, but the jQuery offset() method is different from the jQuery position() method. The offset() method retrieves the current position relative to the document, whereas the position() method retrieves the current position of an element relative to the parent element.
This answer may have been right back in February, but now there is a much easier way.
The position method takes a using argument just for this purpose. For example:
$(div).position({
at: "left+50% top+50%",
of: $(div).parent(),
using: function(css, calc) {
$(this).animate(css, 200, "linear");
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
