加載新頁面時的過渡效果，AJAX

因此，在我的網站上，我使用的是使用AJAX從外部html文件加載內容的THIS METHOD。它看起來不錯，但是，我試圖做的是在內容發生變化時添加頁面轉換。就像當您點擊「home」時，頁面不會自動更改div中的文本，而是將當前的一個向左滑出屏幕，同時從右側滑動新內容。而且我不是在尋找一個「單頁」解決方案。我知道如何做一個「褪色」效果」，但滑動？感謝您的任何建議和解決方案。很遺憾像一個noobish問題...加載新頁面時的過渡效果，AJAX

來源

2013-11-24 Mary1517

你可以提供你的代碼？你到目前爲止做了什麼？ – thenewseattle

使用AJAX XMLHttpRequest()不是新的開發者一個好主意，尤其是現在每種瀏覽器是如何實現自己的XMLHttpRequest()。我建議使用jQuery的AJAX框架$.ajax()或者它的簡寫功能$.get()，但在你的情況我建議這大致相當於$.get()。

既然你沒有包括你的代碼（但你應該下一次！）。這是一個簡單的例子：

HTML：

<ul class="menu"> 
    <li><a href="home.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="services.html">Services</a></li> 
</ul> 
<div id="contents"> 
<!-- Place the loaded contents here --> 
</div>

CSS：

body {overflow-x:hidden;} 
.loaded_content_wrapper { 
    overflow:hidden; 
    margin-left:100%; 
    width:100%; 
    position:absolute; 
}

JS：

function loadContent(href){ 
    /* Create the content wrapper and append it to div#contents 
     then load the contents to the wrapper 
    */ 
    $wrapper = $('<div>'); 
    $wrapper.addClass('loaded_content_wrapper').appendTo('#contents').load(href, function(){ 
     /* When the content is completely loaded 
      animate the new content from right to left 
      also the previous content slide to left and remove afterwards. 
     */ 
     $(this).animate({marginLeft:0}, 'slow').prev().animate({marginLeft:'-100%'}, 'slow', function(){ 
      $(this).remove(); //remove previous content once the animation is complete 
     }); 
    }) 
} 

$('a').click(function(e){ 
    e.preventDefault(); 
    var href = $(this).attr('href'); 
    loadContent(href) 
})

來源

2013-11-25 03:18:25

我只測試了load（）函數，但不是整個動畫，這個想法很簡單： 1.點擊傳遞href 2.創建一個包裝器並加載href頁面內容3.隱藏最新的內容到最右邊然後一旦完全加載移動到左側。 4.如果以前的內容移動到最左邊就隱藏，那麼一旦動畫完成，請將其移除以免它擁擠：D –

我的代碼至今爲止： '<！DOCTYPE html>

Home

「 – Mary1517

我明白了。我的答案也適合你的標記，'loadContent（）'函數將處理從加載新頁面到動畫的事情。但是你可能需要改變函數中的某個選擇器。我在這個** [jsfiddle]（http://jsfiddle.net/mark_s/Pcn88/2/）**中添加了一個解決方案，並帶有一些您應該閱讀的註釋。它不會在jsfiddle中顯示結果，因爲該網站不允許GET方法，但我在我的本地服務器上測試了它，並且它工作正常。乾杯! –

加載新頁面時的過渡效果，AJAX

回答

相關問題