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