在不透明度= 0后加载html [英] load html after opacity = 0

问题描述

我有这个代码. opacity 0和opacity 1有效！但加载(pagina)不加载.为什么?

I have this code. opacity 0 and opacity 1 works! but load(pagina) don't load. Why?

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

如果我只放这个，那就很好

If i put only this, it works fine

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

推荐答案

您需要使用animate和load方法的回调参数来依次执行代码.试试这个:

You need to use the callback parameters of the animate and load methods to execute your code in sequence. Try this:

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

请注意，我已经扩展了这段代码的格式，以使其清楚正在发生的事情.如果需要，您可以删除很多间距以使其更短.

Note I've expanded the formatting of this code to make it clear what's happening. You can remove a lot of the spacing to make it shorter if required.

这篇关于在不透明度= 0后加载html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！