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

Answer 2

correct syntax for .html()是：

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

Answer 3

试试这个：

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作为参数

Answer 4

尝试：

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

和

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

Answer 5

你正在使用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");
    });
}

FadeOut，替换HTML＆amp;淡入

5 个答案: