Question

I am trying to make a div slide to a FIXED position on the bottom of my screen temporarily, when I click on a button. I want it to slide back to where it was on the button release, but I can’t quite get it to work. My code is the following

$("#chatContainer").css("position", "fixed");
$("#chatContainer").animate({ top: '60%' }, 'slow');  

Because the position is fixed temporarily, the Div pops up from the middle of the screen and then slides down. I would like it to slide from the bottom and stick there until release of the click.

Answer 1

Here’s the way I would try it (off the top of my head):

1. Get the window x/y coordinates of the container in question.
2. $.clone it, then set the x/y coordinates of the clone to the same as the original (that way it appears to be moving FROM the original location).
3. Perform necessary animation (hide original > animate clone to new location > re-show original in new position > fade out / delete clone)

You might need to make some tweaks to avoid unnecessary binding etc. on the clone, since the clone is “just for show”.

I’m not sure this is the “best” way technically, but it is the approach I would try to take to get the desired user experience.