title: Slide & Fade in and out of Center with Jquery
body: <p>So what i want.</p>
  
  <p>There will be some content centered on a page (horizontally &amp; vertically).
  The user will be able to click  to load the previous/next bit of content.
  This content will load dynamically with Ajax.</p>
  
  <p>When 
  
  <p>everything will happen in reverse for the Next></p>
  
  <p>To center the content i am using jQuery as i will not know the content size.</p>
  
  <p>heres the code i am using:</p>
  
  <pre><code> // Jquery, CENTER
  jQuery.fn.center = function () {
      this.css("position","absolute");
      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
      return this;
  }
  
  $("div.item1").center(true);
  </code></pre>
  
  <p>To make sure it centers when the browser resizes i'm using :</p>
  
  <pre><code>$(window).bind('resize', function() {
      var that = this;
  
      if (!('balancer' in that)) {
          that.balancer = setTimeout(function() {
              $("div.item1").center(true);           
              delete that.balancer;
          }, 200);
      }
  });
  </code></pre>
  
  <p>I've attempted to use this code to do the animations required. So far no luck.
  item1 appears how i want it to but not quite in the right place (the left: -=100 putting it off)</p>
  
  <pre><code>$('.item1').animate({
      opacity: 1,
      left: '-=100'
  }, 1000);
  
  $('.item2').animate({
      opacity: 1,
      left: '+=100'
  }, 1000);
  </code></pre>
  
  <p>Ive set up a jsfiddle here to show where i'm at:</p>
  
  <p><a href="http://jsfiddle.net/GmRJ9/" rel="nofollow">http://jsfiddle.net/GmRJ9/</a></p>
  
  <p>I'm not too hot on my jQuery in general so go easy on me but i feel it's not too complicated.</p>
  
  <p>However the fact that i want to use it with dynamically loading items might cause some problems. So with that in mind I should probably ask if i'm approaching this in the right manner?</p>
  
  <p>Any guidance would be much appreciated!
  thanks in advance,</p>
  
  <p>J</p>