javascript 如何使用 jquery 的 .load() “动画”页面之间的转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6065293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to "animate" the transition between pages with jquery's .load()
提问by Vitor Reis
I have this ajax site, with pages loading through load()but how do I add a transition? A simple FadeOut + FadeIn would be good already.
我有这个 ajax 站点，页面正在加载，load()但如何添加过渡？一个简单的 FadeOut + FadeIn 已经很好了。
This is the code I'm using to load it (plus a loading indicator).
这是我用来加载它的代码（加上一个加载指示器）。
I want the current page (just container) fadeout and the new one arrives with fadeIn
我想要当前页面（只是容器）淡出，而新页面随着淡入淡出
$(document).ready(function() {
$('a').click(function(event) {
$("#container").append('<div id="loading">Loading...</div>');
event.preventDefault();
var url = $(this).attr('href');
$('div#container').load(url, function() { $("#loading").fadeOut() });
});
});
回答by Matt Ball
You need something a bit finer-grained than .load()so that you can do the fadeOut()beforethe new content is inserted:
您需要一些更细粒度的东西，.load()以便您可以fadeOut()在插入新内容之前执行以下操作：
$(function()
{
var $container = $('#container');
$('a').click(function()
{
$container.html('<div id="loading">Loading...</div>');
var url = $(this).attr('href');
$.get(url, function (data)
{
$("#loading").fadeOut(function()
{
// without this the DOM will contain multiple elements
// with the same ID, which is bad.
$(this).remove();
$container.hide().html(data).fadeIn();
});
});
return false;
});
});
(Very basic) demo: http://jsfiddle.net/mattball/Cgqbx/
（非常基本的）演示：http: //jsfiddle.net/mattball/Cgqbx/
回答by jrode
If you're trying to fade the content in and out, it can be useful to animate the opacity attribute rather than fully fading the element out, to preserve the container height.
如果您尝试使内容淡入淡出，则为 opacity 属性设置动画而不是将元素完全淡出以保留容器高度会很有用。
$(document).ready(function() {
$('a').click(function(event) {
$("#container").animate({'opacity': 0}, 200);
event.preventDefault();
var url = $(this).attr('href');
$('div#container').load(url, function() {
$(this).animate({'opacity': 1}, 200);
});
});
});
回答by daryl
Make sure you have a html markup something along the lines of this:
确保您有一个类似以下内容的 html 标记：
<div id="container">
<div id="content"></div>
</div>
css:
css：
#loading { display:none }
Then with some simple jQuery you will be able to sort this out:
然后使用一些简单的 jQuery，您将能够解决这个问题：
$(function() {
$('a').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
var content = $('#content');
content.fadeOut(400, function() {
$("#container").append('<div id="loading">Loading...</div>');
var loading = $('#loading');
loading.fadeIn(400, function() {
content.load(url, function() {
loading.fadeOut(400, function() {
$(this).remove();
content.fadeIn(400);
});
});
});
});
});
});
Make sense?
说得通？
edit: modified a little.
编辑：稍微修改了一下。
