我想使用 dojo 重新加载页面的一部分并淡入部分页面。现在的问题是,一旦我在 innerHTML
加载后插入它,所有内容都会立即可见。我会尽力解释:
function reload(page) {
var sliderBox = dojo.byId("slider_box");
var xhrArgs = {
url: "/myhtmlsnippet.html",
load: function(data) {
dojo.fadeOut({
duration:100,
node:sliderBox,
onEnd:function() {
dojo.byId('slides_container').innerHTML = data;
dojo.fadeIn({
duration:400,
node:sliderBox,
onEnd:slideRotate()
}).play();
}
}).play();
}
}
var ajax = dojo.xhrGet(xhrArgs);
}
slider_box
是 slides_container
的子项。我想淡出 slider_box
,重新加载 slider_container
并隐藏 slider_box
staying,然后淡入 slider_box
。
我尝试通过 CSS 将 slider_box
设置为 visibility:hidden
但这样它就不会消失。
那么,有人可以帮我吗?
最佳答案
首先,淡出节点#slider_box。所以它的不透明度下降到 0。
然后,您用一些新内容替换那个节点。指令后仍然会有一个#slider_box:
dojo.byId('slides_container').innerHTML = data
但那将是一个新节点,它的不透明度还没有被触及。
因此它完全可见,淡入操作会将其不透明度从 1 设置为 1,换句话说,它什么都不做。
您必须在 innerHTML 指令之后将不透明度设置为 0 和/或将可见性设置为隐藏(不知道 dojo 动画是如何工作的)。 编辑:或者更好的是,在您调用的 html 模板中将不透明度设置为 0。
此外,您作为 node: 参数传递给 fadeIn 的 sliderBox 变量指的是,正如我之前所说的,您通过用 innerHTML 语句替换 in 来消除的节点。
您必须像这样再次查找到新节点:
node:dojo.byId("slider_box"),
总而言之,innerHTML 是所有 javascript 邪恶之源(当然是在 ie 之后)。
关于javascript - 使用 dojo 淡入 Ajax 片段的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6652879/