退出/外部链接启动页面/页面加载
问题描述:
我以前在网站上看到过,当你点击一个链接时,加载页面/启动页面出现淡入淡出,然后新页面淡入。不幸的是,我不能请记住我在哪里看到了这个,否则我只会把它们弄糟。退出/外部链接启动页面/页面加载
任何人都知道的jQuery,mootools,ajax脚本来做到这一点?
谢谢!
答
此脚本将淡出您的页面容器并淡入加载页面(您的启动画面)。一旦加载了启动画面,它就会对内容进行AJAX请求。完成后,它会从启动画面淡入到新页面。
$('#wrapperForThePage').click(function() {
$('#wrapperForThePage').fadeOut(function() {
$('#loadingSplash').fadeIn();
$('#wrapperForThePage').load("yourpage.html", function() {
$('#loadingSplash').fadeOut(function() {
$('#wrapperForThePage').fadeIn(); // Called on complete, 404 or success
});
});
});
});
答
更复杂的东西用MooTools的做:http://www.jsfiddle.net/oskar/rDrtP/
var contentEl = $('content'),
loaderEl = $('loader'),
navEls = $$('#nav a');
var loadContent = function(){
// fade out the container
contentEl.fade('out');
// show the loader
loaderEl.set('opacity', 0).fade('in');
// fetch the new content
new Request.HTML({
url: this.get('href'),
onComplete: function(responseEls){
// empty the previous content and inject the new one
contentEl.empty().adopt(responseEls);
// show the content
contentEl.fade('in');
// hide the loader
loaderEl.fade('out');
}
}).post({
html: '<strong>' + this.get('html') + '</strong>'
});
};
navEls.each(function(nav){
nav.addEvents({
click: function(e){
e.stop();
// load new content when clicking the links
loadContent.bind(this).run();
}
});
});
+0
这个小提琴消失了 – Jason 2010-10-13 19:43:46
+0
不错,发生:-) – 2010-10-26 08:03:36
感谢输入。 – Jason 2010-09-23 02:06:19