jquery - 不透明度 = 0 后加载 html

Question

我有这个代码。不透明度 0 和不透明度 1 有效!但加载(页面)不加载。为什么？

function cargarContenido(pagina) {
    $('#content').animate({"opacity":"0"});
    if ($('#content').css('opacity') == 0) {
        $("#content").load(pagina);
    }
    $('#content').animate({ "opacity": "1" });
}

如果我只放这个，它就可以正常工作

function cargarContenido(pagina) {
    $("#content").load(pagina);
}

Answer 1

您需要使用 animate 和 load 方法的回调参数来按顺序执行代码。试试这个:

function cargarContenido(pagina) {
    $('#content').animate(
        { "opacity": "0" }, 
        function() {
            $("#loadimage").show(); // show a loading image
            // load content when opacity = 0 animation finished
            $("#content").load(
                pagina, 
                function() {
                    $("#loadimage").hide(); // hide a loading image
                    // make opacity = 1 when content has been loaded
                    $('#content').animate({ "opacity": "1" });
                }
            )
        }
    );
}

注意，我扩展了此代码的格式，以使其清楚地表明发生了什么。如果需要，您可以删除大量间距以使其更短。