Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Apr 29th, 2012  |  syntax: None  |  size: 0.99 KB  |  hits: 13  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How do I animate a <div>?
  2. var self = $(this);
  3. self.animate({
  4.     'top': ($(window).height() / 2) - (self.outerHeight() / 2),
  5.     'left': ($(window).width() / 2) - (self.outerWidth() / 2)
  6. }, 600, 'swing', function () {
  7.     self.animate({
  8.         'width': '+=200px',
  9.         'height': '+=200px',
  10.         'top': ($(window).height() / 2) - (self.outerHeight() / 2), //NO UPDATE
  11.         'left': ($(window).width() / 2) - (self.outerWidth() / 2) //NO UPDATE
  12.     }, 600, 'linear');
  13. });
  14.        
  15. 'top': ($(window).height() / 2) - (self.outerHeight() / 2), //NO UPDATE
  16. 'left': ($(window).width() / 2) - (self.outerWidth() / 2) //NO UPDATE
  17.        
  18. 'top': ($(window).height() / 2) - ((self.outerHeight()+200) / 2), // notice the +200
  19.        
  20. self.animate({
  21.             'width': '+=200px',
  22.             'height': '+=200px',
  23.             'top': ($(window).height() / 2) - ((self.outerHeight() +200 )/ 2), //NO UPDATE
  24.             'left': ($(window).width() / 2) - ((self.outerWidth() +200 )/ 2) //NO UPDATE
  25.         }, 600, 'linear');
create a new version of this paste RAW Paste Data