如何解决如何用jquery的.load来“动画化”页面之间的过渡
|| 我有这个ajax网站,页面通过ѭ0加载,但是如何添加过渡?一个简单的FadeOut + FadeIn已经很好。 这是我用来加载它的代码(加上一个加载指示器)。 我希望当前页面(只是容器)淡出,而新页面随着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() });
});
});
解决方法
您需要比
.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;
});
});
(非常基础)演示:http://jsfiddle.net/mattball/Cgqbx/
,如果您尝试淡入和淡出内容,可以设置不透明度属性的动画而不是完全淡出元素,以保持容器高度。
$(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);
});
});
});
,确保您具有类似以下内容的html标记:
<div id=\"container\">
<div id=\"content\"></div>
</div>
CSS:
#loading { display:none }
然后,使用一些简单的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);
});
});
});
});
});
});
合理?
编辑:修改了一点。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。