Javascript 加载新页面时的转换效果，AJAX

因此，在我的网站上，我使用AJAX从外部html文件加载内容。它看起来不错，但是，我想做的是在内容发生变化时添加一个页面转换。就像单击主页时，页面不会自动更改div中的文本，而是将当前文本向左滑出屏幕，同时从右侧滑出新内容。顺便说一句，我不是在寻找一个单页的解决方案。我知道如何使淡入淡出效果，但滑动？ 感谢您提供的任何提示和解决方案。对于这样一个不切实际的问题，很抱歉…

对于新开发人员来说，使用AJAX XMLHttpRequest不是一个好主意，尤其是在现在，每个浏览器如何实现自己的XMLHttpRequest。我建议使用jQuery的AJAX框架$.AJAX或它的速记函数$.get。但在您的情况下，我建议使用.loads，它大致相当于$.get

因为你没有包括你的代码，但你应该下次！。下面是一个简单的例子：

HTML:

JS:

对于新开发人员来说，使用AJAX XMLHttpRequest不是一个好主意，尤其是在现在，每个浏览器都实现自己的XMLHttpRequest。我建议使用jQuery的AJAX框架$.AJAX或它的速记函数$.get。但在您的情况下，我建议使用.loads，它大致相当于$.get

因为你没有包括你的代码，但你应该下次！。下面是一个简单的例子：

HTML:

JS:

---

你能提供你的密码吗？到目前为止你做了什么？你能提供你的代码吗？到目前为止你做了什么？我只测试了加载函数，但没有测试整个动画，想法很简单：1。单击传递href 2。创建包装器并在3中加载href页面内容。将新内容隐藏到最右侧，然后在完全加载后向左移动。4.如果有以前的内容，请将其移到最左侧隐藏，然后在动画完成后将其删除，这样它就不会变得拥挤：Dmy code至今：'function loadPagehref{var xmlhttp=new XMLHttpRequest；xmlhttp.openGET，href，false；xmlhttp.send；return xmlhttp.responseText；}Home'我明白了。我的答案也将适合您的标记，loadContent函数将处理从加载新页面到动画的所有事情。但是您可能需要更改函数中的一些选择器。我在其中添加了一个解决方案，其中包含一些您应该阅读的注释。它不会在JSFIDL中显示结果e因为网站不允许使用GET方法，但我在本地服务器上测试了它，效果很好。干杯！谢谢！我分析了你发布的代码，我想我理解了它的工作原理，所以，这对我有很大帮助：我肯定会在我的项目中使用它。我只测试了加载功能，但没有测试整个动画，想法很简单：1.点击传递href 2。创建包装并在3内加载href页面内容。将新内容隐藏到最右侧，然后在完全加载后向左移动。4.如果有以前的内容，请将其也移动到最左侧以隐藏，然后在动画完成后将其删除，这样它就不会变得拥挤：Dmy code至今：'函数loadPagehref{var xmlhttp=new XMLHttpRequest；xmlhttp.openGET，href，false；xmlhttp.send；return xmlhttp.responseText；}Home'我明白了。我的答案也将适合您的标记，loadContent函数将处理从加载新页面到动画的所有事情。但是您可能需要更改函数中的一些选择器。我在其中添加了一个解决方案，其中包含一些您应该阅读的注释。它不会在JSFIDL中显示结果由于网站不允许使用GET方法，但我在本地服务器上测试了它，它运行良好。干杯！谢谢！我分析了你发布的代码，我想我了解它的工作原理，因此，它将对我有很大帮助：我肯定会在我的项目中使用它。

<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>

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

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)
})