與jquery的頁面轉換

我想在頁面之間創建一些轉換。我做了這種方式：與jquery的頁面轉換

$("div.fading").css('display', 'none'); 
    $("div.fading").fadeIn(500); 
    $("a.fade").click(function(event){ 
     event.preventDefault(); 
     link = event.href; 
     $("div.fading").fadeOut(500, redirect(link)); 
    });

在重定向有我用了window.location，它一直在努力，但效果淡入已運行對每個已加載頁面。我不喜歡那樣，所以我試着用ajax做。它應該允許我調用fadeIn函數作爲jQuery中的回調函數。我有這樣的代碼，

$(".fading").click(function(event){ 
    event.preventDefault(); 
    var link = this.href; 
    $(".fade").fadeOut(300, function(){ 
     $.ajax({ 
      url: link, 
      success: function(){ 
       $(".fade").fadeIn(300); 
      } 
     }); 
    });

這是不完全working..All效果是好的，但頁面我淡入後得到的是僅僅是褪色out..IMHO同我能做到這一點與.load另一種方式（）函數，我試圖實現這一點，但有太多的問題:-)有誰知道我該怎麼做才能使它完全正常工作？謝謝..

來源

2010-08-23 simekadam

您通過ajax調用頁面，但你在您撥打fadeIn()之前，請勿替換當前的.fade div的內容。我已經修改了你的代碼來做到這一點。應該做同樣的事情一點清潔劑。

$(".fading").click(function(event){ 
    event.preventDefault(); 
    var link = this.href; 
    $(".fade").fadeOut(300, function(){ 
     $.ajax({ 
      url: link, 
      success: function(pageHTML){ 
       $(".fade").html(pageHTML); 
       $(".fade").fadeIn(300); 
      } 
     }); 
    });

來源

2010-08-23 11:16:47 sjobe

是的，它看起來不錯，但我應該加載和替換頁面的整個代碼，我不知道如何選擇它。當我使用窗口作爲DOM選擇器，它不工作，當我使用HTML，它不加載樣式表等等。這正是我用.load（）函數得到的問題.. – simekadam 2010-08-23 11:35:24

.load（）將允許您使用css id選擇器加載頁面片段。當您通過ajax獲取內容時，您可能需要考慮使用iframe或內嵌css或使用css import。您也可以在頁面上使用CSS樣式，以便在加載新內容時正確顯示所有內容。 – sjobe 2010-08-23 12:22:06

嗨，謝謝你的建議，我試過了CSS @import功能，不幸的是它沒有成功。我將嘗試將所獲得的數據分成幾部分，並僅替換已更改的部分（標題，正文，..）。我希望這是一個好方法:-) – simekadam 2010-08-24 18:23:46

我想你只是錯過了任何使用的返回數據。在成功的功能，你需要做的是這樣：

$('.fade').html(data);

，然後你可以用已經更新的頁面褪色回。

來源

2010-08-23 11:19:47 Timbo

與jquery的頁面轉換

回答

相關問題