Animate a <div> with jQuery

Question

I am looking for an option to move a <div> on the page when the page is loaded. The <div> contains a chat window.

The box must fall down slowly to the bottom of the page and land on the footer. How can this be achieved?

Answer 1

You'll want to use jquery .animate():

http://api.jquery.com/animate/

$(document).ready(function() {
  $('body').append('<div id="chatwindow">Hello World!</div>');

  $('#chatwindow').animate({
    bottom: '0', //you'll want to set this to whatever it needs to be to be at the bottom
  }, 5000, function() {
    //completion code?
  });
});

Answer 2

Check out the .animate() function, which can be used to smoothly move div's and other elements over the page: Animate.

Additionally, the div can be added at page load as such:

$(document).ready(function() {
    $('body').append('<div id="chatwindow">Hello World!</div>');
});