jQuery:当通过 AJAX 加载时，fadeout() 无法处理绝对定位的元素

Question

我在一个网站上使用 AJAXify 来实现页面转换，我遇到了一些 jQuery 的奇怪行为。

我的代码:

HTML(我正在使用 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;}

当我通过 URL 加载页面而不是通过 AJAX 链接链接到它时，我的 div 正确淡出(并且我收到警报)，但是，当我通过 AJAX 化导航链接到它时，淡入淡出不会发生了，但我仍然收到警报，所以函数 fadeOut() 肯定会触发。

当我从 CSS 中删除绝对定位并通过 AJAX 链接到页面时，我的 div 会根据需要淡出(我会收到警报)。它似乎只是导致了 div 的绝对定位问题。

当通过 AJAX 或硬加载链接到受影响的页面时，fadeIn() 可以正确处理绝对定位。只是 fadeOut 导致了问题。

有什么建议吗？

Answer 1

我设法通过简单地向 div 添加宽度来解决这个问题。奇怪的