Question

我要在页面之间创建一些过渡。我是这样做的：

    $("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并且它一直在工作，但fadeIn效果已经为每个已加载的页面运行。我不喜欢那样，所以我正在尝试用ajax。它应该允许我在jquery中将fadeIn函数作为回调函数调用。我有这个代码，

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

这还没有完全正常工作。所有效果都没问题，但是我在fadeIn之后得到的页面就像淡出了一样......我可以用.load（）函数做另一种方式，我试图实现那个，但也有一些问题:-)是否有人知道我应该做些什么才能让它完全正常工作？谢谢..

Answer 1

您正在通过ajax调用该页面，但在调用.fade之前，您不会替换当前fadeIn() div的内容。我已修改您的代码以执行以下操作。 .load()应该做一点清洁工作。

$(".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);
            }
        });
    });

Answer 2

我认为你只是遗漏了所有使用过的数据。在成功功能中，您需要执行以下操作：

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

然后，您可以将页面更新后淡入淡出。

使用jquery进行页面转换

2 个答案: