jquery動畫到新頁面

有沒有辦法使用jquery.animate來加載一個頁面的Ajax和當它準備好動畫它向上滑動或側面？因此，讓我們在index.html頁面中說im，然後我想要轉到about.html頁面，它將首先加載它，當它準備好而不是刷新到新頁面時，它將使用此方法對其進行動畫處理：http://demos.flesler.com/jquery/localScroll/#section4c jquery動畫到新頁面

function(){ 
$("#go2About").click(function(){ 
    $('about.html').animate({ 
     //animate the new page here 
    }); 
});

這將是某種形式的如何的示例代碼將動畫

來源

2012-06-07 lomas09

對於什麼是值得的，我還沒有遇到這種情況，這是*可取的。* – Blazemonger

您可以使用像這樣的邏輯：

<!DOCTYPE> 

<html> 
<head> 
    <title>Test</title> 

    <script type="text/javascript"> 
     function loadIt() { 
      $.ajax({ 
       url: "about.html", 
       cache: false, 
       success: function (data) { 
        $("#content").empty(); 
        $(data).hide().appendTo($("#content")).slideDown(); 
       }, 
       error: function() { 
        alert("something went wrong"); 
       } 
      }); 
     } 
    </script> 
</head> 
<body> 
    <input type="button" id="button1" value="Load About" onclick="loadIt();" /> 

    <br /> 

    <div id="content" style="width: 400px; height: 400px; border: 1px solid #000;"> 

    </div> 
</body> 
</html>

但是，僅僅知道的「about.html」的內容不應該是一個完整的HTML文檔 - 它應是一種進入一個<體>元素。

更簡單的方法可能是使用iframe（當它沒有任何內容時隱藏） - 當您單擊按鈕時，讓javascript將iframe的src屬性設置爲「about.html」，然後使用slideDown（）使它「加載」動畫。這樣，「about.html」可以是一個完整的HTML文檔，你不必擔心這樣的事情。

來源

2012-06-07 19:25:41 Ian

'$（data）.hide（）'是什麼？這條線可能就像 - '$（「＃content」）。html（data）.slideDown（）;' - 這樣你就不必首先清除內容。 – Lix

確定很酷...謝謝 – lomas09

，這將無法正常工作。 hide（）確保你放入div的內容不會立即顯示。如果你這樣做，調用.html（數據）立即將內容放入div（它是可見的），然後調用slideDown（）什麼也不做。 – Ian

你可以有同樣的效果不僅沒有實際刷新頁面。

例如，如果您將每個「頁面」HTML包裝在一個包裝<div>元素中，那麼您可以簡單地將這些包裝div的內外動畫製作爲用戶視圖端口以創建頁面轉換的效果。

您的AJAX調用可以用HTML頁面填充相應的<div>元素，一旦加載，您可以調用.animate()函數來交換頁面。

來源

2012-06-07 19:18:05 Lix

所以你的意思是加載每個頁面到它自己的div在索引頁，然後爲這些動畫？ – lomas09

是的.. ajax調用將填充正確的div，然後您使用回調動畫當前頁面和新頁面在... – Lix

jquery動畫到新頁面

回答

相關問題