javascript - 淡出、替换 HTML 和淡入

Question

我在使用一个简单的 JQuery 函数淡出一个元素、替换其中的图像并再次淡入时遇到了一些问题。

我的函数如下所示:

function nextPage() {
        $("#leftPage").fadeOut("slow", function() {
            $("#leftPage").html="<img src='page4.jpg'>";
            $("#leftPage").fadeIn("slow");
        });

        $("#rightPage").fadeOut("slow", function() {
            $("#rightPage").html="<img src='page5.jpg'>";
            $("#rightPage").fadeIn("slow");
        });
}

淡入/淡出部分工作正常，但 HTML 未被新图像替换。你能看出这有什么问题吗？

Answer 1

function nextPage() {
    $("#leftPage").fadeOut("slow", function () {
        $("#leftPage").html("<img src='page4.jpg'>");
        $("#leftPage").fadeIn("slow");
    });
    $("#rightPage").fadeOut("slow", function () {
        $("#rightPage").html("<img src='page5.jpg'>");
        $("#rightPage").fadeIn("slow");
    });
}

您正在将一个字符串分配给 .html，这实际上是一个将字符串作为参数 的函数，而不是您可以为其分配内容的属性。

请注意，我已将上面代码段中的 .html = "" 更改为 .html("")。这现在将一个字符串传递给 .html()，它会相应地更新元素。