title: jQuery: fadeout() not working on absolutely positioned element when loaded via AJAX
body: <p>I am using AJAXify on a site I am working on to achieve page transitions and am experiencing some strange behaviour with jQuery. </p>
  
  <p>My code:</p>
  
  <p>HTML (I am fading through the backgrounds with jQuery)</p>
  
  <pre><code>&lt;div id="backgrounds"&gt;
  &lt;img src="/assets/Uploads/hpbg3.jpg" alt="" class="bodybackground"&gt;
  &lt;img src="/assets/Uploads/hpbg2.jpg" alt="" class="bodybackground"&gt;
  &lt;img src="/assets/Uploads/hpbg4.jpg" alt="" class="bodybackground"&gt;
  &lt;img src="/assets/Uploads/hpbg5.jpg" alt="" class="bodybackground"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('.otherClass').each(function() {
          $('#backgrounds').fadeOut(function(){
                   alert('fade');
              });
  });
  
  $('#main .container.homepageClass').each(function() {
          $('#backgrounds').fadeIn();
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#backgrounds {display: none; position: absolute; left: 50%; margin-left: -714px;}
  </code></pre>
  
  <p>My div fades out correctly when I do load the page through the URL rather than linking to it via the AJAX link (and I get the alert), however, when I link to it through the AJAXified navigation, the fade does not happen, yet I still get the alert so the function is fadeOut() is definitely triggering.</p>
  
  <p>When I remove the absolute positioning from the CSS and link to the page via AJAX, my div fades out as I need it to (and I get the alert). It only seems to be causing the issue with the absolute positioning of the div.</p>
  
  <p>The fadeIn() works correctly with the absolute positioning when linking to an effected page via AJAX or with a hard load. It is just fadeOut which is causing issues.</p>
  
  <p>Any suggestions?</p>