编辑:此软件包是我试图在此处修复的完整且未经医生的版本。问题出在/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 false
与e.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/