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

Question

因此，在我的網站上，我正在使用此方法使用AJAX從外部html文件加載內容。 看起來不錯，但我要做的就是在內容更改時添加頁面過渡。 就像單擊“主頁”時一樣，頁面不會自動更改div中的文本，而是將當前文本向左滑動到屏幕外，同時從右滑動新內容。 而且我不是在尋找“一頁”解決方案。 我知道如何產生“褪色”效果，但會滑動嗎？感謝您提供任何提示和解決方案。對於這樣一個令人討厭的問題，我們深表歉意...

Answer 1

對於新開發者而言，使用AJAX XMLHttpRequest()並不是一個好主意，尤其是在當今每個瀏覽器如何實現自己的XMLHttpRequest() 。 我建議使用jQuery的AJAX框架$.ajax()或簡寫功能$.get() 。 但在您的情況下，我建議.load()大致相當於$.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)
})