Анимировать и загрузить новую страницу поверх текущей

Question

Анимировать и загрузить новую страницу поверх текущей

0

Итак, у меня есть 5 элементов портфеля, и какой идентификатор должен произойти, когда пользователь нажимает на него, так это то, что страница сведений о проекте анимируется и загружается через страницу. Теперь я сделал краткую основу того, как я думал, что это может сработать, но не уверен, что это путь. Также не уверен, как я должен загружать в другом контенте для разных проектов, если я делаю это так.

Теперь я просто анимацию скрытый div на всей странице, когда один из элементов портфеля нажата. Вот скрипка, чтобы вы, ребята, поняли:

http://jsfiddle.net/MF32t/1/

$(document).ready(function() {
$('.portfolio__project').click(function() { 
    $('.projectDetails').css({"display":"inline"});
    $('.projectDetails').animate({"width":"100%"}, 750);
    $('.projectDetails').delay(500).animate({"height":"100%"}, 750);
});

});

Это путь? Или я должен думать в другом направлении? Не нужно готовый к работе и рабочий код, но просто нужно толчок в правильном направлении.

Благодарю!

Awesom-o 09 окт. 2013, в 15:46

Источник

Теги:

javascript

jquery

css

animation

portfolio

1 ответ

Ещё вопросы

Adi Ulici · Answer 1 · 2013-10-09T12-24-00.000Z

Вы можете использовать ajax для загрузки содержимого. Проект может выглядеть так:

function loadProject(projectID) {
  $.post(
    "loadProject.php",
    {
      projectID: projectID
    },
    function(content) {
      // Set the content
      $("#content").html(content); // and animations
    }
  );
}

Вы также можете загружать детали проекта только в основной контейнер, вам не нужно скрывать всю страницу. При загрузке содержимого, которое вы теряете из старого, установите новый контент и затухайте в новом (например). Это ваш выбор здесь

Спасибо! начал искать больше об ajax, и это мне очень помогло: stackoverflow.com/questions/12116100/…
Нет проблем, рад, что помог. Вы можете установить правильный ответ, если он отвечает вашим потребностям.