Эффект перехода при загрузке новой страницы, AJAX

Question

Итак, на моем сайте я использую THIS METHOD загрузки содержимого из внешнего html-файла с помощью AJAX. Он выглядит неплохо, и все, кроме того, что я пытаюсь сделать, это добавить переход страницы при изменении содержимого. Например, когда вы нажимаете «home», страница не автоматически изменяет текст в div, а скорее сдвигает текущую влево, выходит из экрана и в то же время сдвигает новое содержимое справа. И я не ищу решение «одной страницы» кстати. Я знаю, как сделать «замирания» эффект», но скольжение? Спасибо за любые советы и решения. И извините за noobish вопрос, как это ...

Answer 1

Использование AJAX XMLHttpRequest() не является хорошей идеей для новых разработчиков, особенно в наше время с тем, как каждый браузер реализует свои собственные XMLHttpRequest(). Я предлагаю использовать AJAX Framework JQuery в $.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) 
})