javascript - 淡出加载然后淡入不起作用

Question

所以我有一个用户可以执行的一系列操作的列表，它将其他页面的内容加载到 div 中，发生的情况是 div 的当前内容闪烁(淡出然后再次进入)，然后出现新内容我想要做的是让淡入动画等到内容准备好加载然后淡入 div 这里是 iam 当前使用的 jquery 代码

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

Answer 1

两件事:1，您需要在加载之前隐藏 div，2，准备好后淡入。

我会在此处设置不透明度动画，而不是使用 fadeIn 以获得更好的控制:

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