jquery - 在 opacity = 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" });
                }
            )
        }
    );
}

注意我已经扩展了这段代码的格式，以明确发生了什么。如果需要，您可以删除很多间距以使其更短。

Answer 2

animate()是异步的，因此当您检查不透明度时，它不为零，因为动画功能尚未完成。在不透明度完成动画后，您可以使用 animate 中的回调来执行相同的操作：

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

Answer 3

我认为你应该在回调函数中完成动画后做这些事情，因为它会在完成动画后运行。阅读有关该complete功能的文档，

   $('#content').animate({"opacity":"0"},500,function(){
                     $("#content").load(pagina,function(){
                         $('#content').animate({ "opacity": "1" });
                     });             
     });

Answer 4

我想你想要做的是在#content的不透明度为0之后加载任何“pagina”？您应该使用完整参数而不是询问不透明度是否为 0：

功能 cargarContenido(pagina){

$('#content').animate({"opacity":"0"}, 1000, function(){

    $("#content").load(pagina, function(){

          $('#content').animate({ "opacity": "1" });

    });

});

}

Answer 5

尝试使用 animate 的附加参数：

$('#content').animate({"opacity":"0"}, slow, function() {
    $("#content").load(pagina);
    $('#content').animate({ "opacity": "1" });
});