I am currently exploring ways to animate a div that starts in the center of a page within another div that is centrally located. The main challenge I face is that initially, this div should not have an absolute position. Ideally, I would prefer it not to start with an absolute position as it makes it difficult to display content below it. The size of the box will be relatively small, ranging between 100px and 600px in height and 400px to 800px in width.
I came across a helpful JsFiddle Example that almost meets my requirements. However, the div in the example begins with an absolute position at the bottom right corner of the page for animation.
Once the div reaches the bottom right corner of the page, I need it to remain fixed in that position so that scrolling up and down the page does not affect its location. At this stage, I am not concerned about the ability to move it back to its original spot.
A few approaches I attempted: Aligning the div to the desired position and then, upon clicking a button, adding a class with the attribute position: absolute and using the animate function like this:
chatWindow.stop().animate({
bottom: 0
, right: 0
}, 2000);
However, my assumption is that it needs to have its position set initially to top: 0; left: 0, which could be why it's not working.
I have successfully implemented the functionality without animation and am keen on figuring out how to animate it. Without animation, toggling a class with normal positional attributes to one with
position: fixed; bottom: 0; right: 0Here is a Codepen Example I created showcasing what I require, with the only missing piece being the animation aspect. Any assistance would be greatly appreciated as I've been grappling with this issue for some time now.