5

我在我正在开发的网站上使用 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 的绝对定位问题。

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?

4

3 回答 3

4

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

于 2012-07-03T23:53:18.323 回答
0

Try adding a duration to your fadeout function that is really large, i.e 5-10 seconds. If you still don't see the fadeout then you can focus on the css a bit more. Otherwise, you know something is stalling when using Ajaxify, and your fadeout is being triggered and completed before the rendering takes place.

Sorry, can't comment on questions yet - I know this is not an answer.

于 2012-07-03T22:30:02.083 回答
0

如果您使用的是Balupton 的AJAXify 要点（看起来就是您所提到的），那么我会说我在通过该要点加载 Javascript 代码时遇到了问题。您能否验证您是否正在使用该脚本加载任何 Javascript？尝试在您的每个 AJAXified 页面上包含一个 Javascript，它的作用只不过是alert("hello");. 如果您没有看到代码，那么我敢打赌您的 Javascript 甚至都没有触发。如果是这种情况，那么试试这段代码，它对我有用：

$scripts.each(function(){
    var $script = $(this), scriptText = $script.text();
    scriptText = "<script>" + scriptText + "</script>";
    contentHtml += scriptText;
});
于 2012-07-03T22:41:25.303 回答