2013-12-18 44 views
0

因此,我有一堆用户可以做它的东西的列表加载其他页面的内容到一个div什么会发生当前div的内容闪烁(淡出然后再次),那么新的内容出现什么我想要做的是使淡入动画等到内容准备好加载,然后在这里DIV褪色是目前使用淡出负载然后淡入不起作用

$(document).ready(function(){ 
    $("#History").click(function(){ 
     $('#Display').fadeOut("fast").load("History.php").fadeIn("fast"); 
    }); 
    $("#Items").click(function(){ 
     $('#Display').fadeOut("fast").load("SellerItems.php").fadeIn("fast"); 
    }); 
}); 

回答

3

两件事:1,你需要隐藏的div在加载之前,2,在准备就绪时淡入。

我会在这里动画的不透明度,而不是使用fadeIn为更好地控制:

$("#History").click(function(){ 
    $('#Display').css('opacity', 0).load("History.php", function() { 
     $(this).animate({ opacity: 1 }, 'fast'); 
    }); 
}); 
+0

感谢一群伙计这完美的作品其他闪烁太多,如果有人要使用此 –

1

load方法jQuery代码亚姆支持回调。
例如:

$('#Display').load("SellerItems.php", function() { 
    $(this).fadeIn("fast"); 
}); 
3

使用随既​​和load()方法callback function参数。他们将被调用的时候淡出完成,AJAX程序分别完成,:

$("#History").click(function(){ 
    $('#Display').fadeOut("fast", function(){ 
     $(this).load("History.php", function(){ 
      $(this).fadeIn("fast"); 
     }); 
    }); 
}); 
+0

工作正常,非常感谢 –

+0

很高兴能有帮助。 – George

+0

在使用承诺执行fadeOut的同时加载内容会更加有效。 – David

1

jQuery的load函数接受的是,当操作完成,就像运行的回调:

$("#result").load("ajax/test.html", function() { 
    alert("Load was performed."); 
}); 

所以你应该做的是回调添加到您的代码:

$("#History").click(function() { 
    $('#Display').load("History.php", function() { 
    $(this).fadeIn("fast"); 
    }); 
});