加载新页面时的过渡效果，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

回答

相关问题