与jquery的页面转换

问题描述：

我想在页面之间创建一些转换。我做了这种方式：与jquery的页面转换

$("div.fading").css('display', 'none'); 
    $("div.fading").fadeIn(500); 
    $("a.fade").click(function(event){ 
     event.preventDefault(); 
     link = event.href; 
     $("div.fading").fadeOut(500, redirect(link)); 
    });

在重定向有我用了window.location，它一直在努力，但效果淡入已运行对每个已加载页面。我不喜欢那样，所以我试着用ajax做。它应该允许我调用fadeIn函数作为jQuery中的回调函数。我有这样的代码，

$(".fading").click(function(event){ 
    event.preventDefault(); 
    var link = this.href; 
    $(".fade").fadeOut(300, function(){ 
     $.ajax({ 
      url: link, 
      success: function(){ 
       $(".fade").fadeIn(300); 
      } 
     }); 
    });

这是不完全working..All效果是好的，但页面我淡入后得到的是仅仅是褪色out..IMHO同我能做到这一点与.load另一种方式（）函数，我试图实现这一点，但有太多的问题:-)有谁知道我该怎么做才能使它完全正常工作？谢谢..

答

您通过ajax调用页面，但你在您拨打fadeIn()之前，请勿替换当前的.fade div的内容。我已经修改了你的代码来做到这一点。应该做同样的事情一点清洁剂。

$(".fading").click(function(event){ 
    event.preventDefault(); 
    var link = this.href; 
    $(".fade").fadeOut(300, function(){ 
     $.ajax({ 
      url: link, 
      success: function(pageHTML){ 
       $(".fade").html(pageHTML); 
       $(".fade").fadeIn(300); 
      } 
     }); 
    });

是的，它看起来不错，但我应该加载和替换页面的整个代码，我不知道如何选择它。当我使用窗口作为DOM选择器，它不工作，当我使用HTML，它不加载样式表等等。这正是我用.load（）函数得到的问题.. – simekadam 2010-08-23 11:35:24

.load（）将允许您使用css id选择器加载页面片段。当您通过ajax获取内容时，您可能需要考虑使用iframe或内嵌css或使用css import。您也可以在页面上使用CSS样式，以便在加载新内容时正确显示所有内容。 – sjobe 2010-08-23 12:22:06

嗨，谢谢你的建议，我试过了CSS @import功能，不幸的是它没有成功。我将尝试将所获得的数据分成几部分，并仅替换已更改的部分（标题，正文，..）。我希望这是一个好方法:-) – simekadam 2010-08-24 18:23:46

答

我想你只是错过了任何使用的返回数据。在成功的功能，你需要做的是这样：

$('.fade').html(data);

，然后你可以用已经更新的页面褪色回。

与jquery的页面转换

相关推荐