编辑:此软件包是我试图在此处修复的完整且未经医生的版本。问题出在/data/renderpage.js脚本中。在继续之前,请随时进行检查。

https://github.com/Tricorne-Games/HyperBook

我非常感谢所有帮助人员!

=

我正在完善一个jQuery脚本以严格的顺序执行以下操作...


淡出文本。
缩小容器div的大小。
预加载远程HTML ////尚未显示!///
打开容器div的大小。
淡入新的远程HTML。


我不介意步骤1和2、4和5是否合并为一个完整的步骤(同时淡入/调整大小)。加载新HTML时,它会中断整个动画,甚至是从头开始。

我的想法是,直到动画正确渲染后,我才希望显示我的远程HTML。我希望原始文本淡出并关闭容器div,然后在幕后准备新HTML的文本,然后打开容器div并淡入新文本。

看来,当我调用load(url)函数时,它会立即加载页面,并且动画仍在运行(例如新的HTML最终淡出,只是淡出,而不是原始文本,然后新一)。要么,要么整个函数同时调用了每一行,这破坏了我想要的页面切换效果。

这是我当前的脚本设置...

$(document).ready(function() {

// Start-Up Page Load (Cover, ToC, etc.)
$('#content').load('pages/page1.htm');

// Navigating Pages
$(document).on('click', 'a', function(e) {

    e.preventDefault();

    var ahref = $(this).attr('href');

    $('#content_container').animate({height: 'hide'}, 500);

    $('#content').fadeTo('slow', 0.25);

    $('#content').load(ahref);
    $('#content').css({opacity: 0.0});

    $('#content').fadeTo('slow', 1.0);

    $('#content_container').animate({height: 'show'}, 500);

    return false;

});
});


我在这里做什么错了?我已经在所有这些步骤中的每一个上使用了delay()函数,但是它并不能解决保留新文本的问题。

最佳答案

jQuery对象可以通过在jQuery元素上调用promise为其动画队列提供.promise

您可以等待其中的一个或多个使用$.when()完成,然后执行其他操作。

以下内容会逐渐淡出并与负载平行向上滑动,然后(仅在动画完成时),向下滑动然后逐渐(依次)逐渐淡入:

$(document).on('click', 'a', function (e) {
    e.preventDefault();
    var ahref = $(this).attr('href')
    var $container = $('#content_container');
    var $content = $('#content');

    // Slide up and fadeout at the same time
    $container.animate({
        height: 'hide'
    }, 500);
    $content.fadeOut();

    // Load the content while fading out
    $('#content').load(ahref, function () {
        // Wait for the fade and slide to complete
        $.when($container.promise(), $content.promise()).then(function () {
            // Slide down and fadein (in sequence)
            $container.animate({
                height: 'show'
            }, 500, function () {
                $content.fadeTo('slow', 1.0);
            });
        });
    });
});


JSFiddle:http://jsfiddle.net/TrueBlueAussie/pffm1tnb/3/

此版本的唯一问题是load的完成速度可能比渐变/幻灯片快,并且过早显示新数据。在这种情况下,您不想使用load,而要使用get(因此您可以控制何时插入新内容):

// Load the content while fading out
$.get(ahref, function (data) {
    // Wait for the fade and slide to complete
    $.when($container.promise(), $content.promise()).then(function () {
        $content.html(data);
        // Slide down and fadein (in sequence)
        $container.animate({
            height: 'show'
        }, 500, function () {
            $content.fadeTo('slow', 1.0);
        });
    });
});


JSFiddle:http://jsfiddle.net/TrueBlueAussie/pffm1tnb/4/

笔记:


点击处理程序中的return falsee.stopPropagation()e.preventDefault()相同,因此通常只需要一个。
我从@Pete开始使用JSFiddle,因为没有其他示例很方便。谢谢皮特。


更新:

根据现在发布的完整代码,您将返回整页(包括标题和正文标签)。如果将代码更改为.load(ahref + " #content" ),它将仅提取所需的部分。这与我提供的第二个(更好的)示例冲突,后者需要将返回的页面分为部分页面(或仅提取所需的部分)。

附加更新:

由于$.get还返回jQuery promise,因此您可以将其进一步简化为:

$.when($.get(ahref), $container.promise(), $content.promise()).then(function (data) {
    $content.html(data);
    // Slide down and fadein (in sequence)
    $container.animate({
        height: 'show'
    }, 500, function () {
        $content.fadeTo('slow', 1.0);
    });
});


传递给$.when的每个promise的解析值将按顺序传递给then,因此传递的第一个参数将是data promise的$.get

JSFiddle:http://jsfiddle.net/TrueBlueAussie/pffm1tnb/11/

10-05 20:58
查看更多