скользить между страницами с помощью jQuery

Question

У меня есть 4-страничный веб-сайт, и я хочу перейти между 4 страницами с эффектом слайда.Я не хочу делать это, используя #ID.Я хочу нажать кнопку или ссылку, чтобы перейти на следующую страницу.Я знаю, что это можно сделать с помощью jQuery, и я видел сайты, которые делают это.Пожалуйста, помогите.Заранее благодарим за все предложения, критику и комментарии.

Answer 1

Проверьте этот учебник и пример http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

По сути, вы должны настроить CSS и HTML так, чтобы все панели / экраны, которые вы хотите видеть в виде элементов div - строк и столбцов.

Затем установите селектор для каждой панели и свяжите событие щелчка [Код из ссылка] .

$(document).ready(function() {

    //get all link with class panel
    $('a.panel').click(function () {

                //reset and highlight the clicked link
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');

        //grab the current item, to be used in resize function
        current = $(this);

                //scroll it to the destination
        $('#wrapper').scrollTo($(this).attr('href'), 800);      

                //cancel the link default behavior
        return false;
    });


    //resize all the items according to the new browser size
    $(window).resize(function () {

        //call the resizePanel function
        resizePanel();
    });

});

Answer 2

Я предлагаю использовать jQuery для перемещения вашего контента с экрана, после этого используйте AJAX, чтобы обновить контент для вашей новой страницы. Установите содержимое на другую сторону экрана и снова используйте jQuery, чтобы сдвинуть его с этой стороны.

Как то так ...

<div id='wrapper'> // this has a set width and overflow hidden
  <div id='content'>
    your content
  </div>
</div>

Пользователь нажимает на ссылку, анимирует поле «контент», чтобы оно исчезло со страницы. Сделайте AJAX-ввод, поместите «контент» на другую сторону страницы (достаточно далеко, чтобы вы его не видели), анимируйте поле, чтобы оно появилось.