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

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