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添加宽度来解决这个问题。奇异

Answer 2

尝试为您的fadeout功能添加一个非常大的持续时间，即5-10秒。如果你仍然没有看到淡出，那么你可以更专注于css。否则，你知道在使用Ajaxify时会出现停顿现象，并且在渲染发生之前你的fadeout被触发并完成。

很抱歉，暂不能对问题发表评论 - 我知道这不是答案。

Answer 3

如果您正在使用AJAXify gist by Balupton（看起来就像您提到的那样），那么我会说我在通过该要点加载Javascript代码时遇到了问题。您能否使用该脚本验证您是否正在加载任何Javascript？尝试在每个只执行alert("hello");的AJAXified页面上包含Javascript。如果你没有看到代码那么我敢打赌你的Javascript甚至都没有解雇。如果是这样，那么试试这个代码，它对我有用：

$scripts.each(function(){
    var $script = $(this), scriptText = $script.text();
    scriptText = "<script>" + scriptText + "</script>";
    contentHtml += scriptText;
});

jQuery：当通过AJAX加载时，fadeout（）无法处理绝对定位的元素

3 个答案: