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正确淡出(并且我收到警报),但是,当我通过AJAXified导航链接到它时,淡入淡出不会发生,我仍然得到警报,因此函数fadeOut()肯定会触发.

当我从CSS中删除绝对定位并通过AJAX链接到页面时,我的div会在我需要的时候消失(并且我得到警报).它似乎只会导致div的绝对定位问题.

当通过AJAX或硬加载链接到受影响的页面时,fadeIn()可以正确地使用绝对定位.只是fadeOut引起了问题.

有什么建议？

Answer 1

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