淡出，替换HTML和淡入

FadeOut, Replace HTML & FadeIn

本文关键字：淡入 HTML 替换 淡出      更新时间：2023-09-26

我在让一个简单的 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 未被新图像替换。你能看出这个有问题吗？

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() ，这会相应地更新元素。

.html()的正确语法是：

$("#leftPage").html("<img src='page4.jpg'>");

试试这个：

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

jQuery的HTML是一个函数，而不是一个属性。传入要替换元素内容的 html 作为参数

尝试：

$("#leftPage").html("<img src='page4.jpg'>");

和：

$("#rightPage").html("<img src='page5.jpg'>");

你用jQuery的.html()错了

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");
    });
}
相关文章：