jQuery: fadeout() not working on absolutely positioned element when loaded via AJAX

Question

I am using AJAXify on a site I am working on to achieve page transitions and am experiencing some strange behaviour with jQuery.

My code:

HTML (I am fading through the backgrounds with jQuery)

<div id="backgrounds">
<img src="/assets/Uploads/hpbg3.jpg" alt="" class="bodybackground">
<img src="/assets/Uploads/hpbg2.jpg" alt="" class="bodybackground">
<img src="/assets/Uploads/hpbg4.jpg" alt="" class="bodybackground">
<img src="/assets/Uploads/hpbg5.jpg" alt="" class="bodybackground">
</div>

jQuery

$('.otherClass').each(function() {
        $('#backgrounds').fadeOut(function(){
                 alert('fade');
            });
});

$('#main .container.homepageClass').each(function() {
        $('#backgrounds').fadeIn();
});

CSS

#backgrounds {display: none; position: absolute; left: 50%; margin-left: -714px;}

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.

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.

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.

Any suggestions?

Answer 1

I managed to solve this by simply adding a width to the div. Bizarre