Question

因此，在我的网站上，我使用THIS METHOD使用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)
})

加载新页面的过渡效果，AJAX

1 个答案: