Ajax Open, Close Effect

Question

Может кто-нибудь сказать мне, как сделать анимацию, как это:

http://dageniusmarketer.com/DigitalWonderland/Animation

внутри моего текущего сайта, который

dageniusmarketer.com / DigitalWonderland /

Я бы хотел, чтобы окно, в котором вы видите весь текстовый контент, открывалось и закрывалось по ходу навигации по ссылкам, чтобы открыть новую страницу (закрыть старый контент, открыть новый контент). Я не программист по профессии, просто новичок, который скопировал некоторый код ajax для текущей настройки окна. Весь текущий код окна находится в index.html. Я не знаю, что мне нужно было бы добавить в мой текущий код, хотя, чтобы он работал так, как я прошу. Может кто-то указать мне верное направление?

Спасибо

Answer 1

В исходном тексте вашего веб-сайта я вижу, что вы используете какой-то действительно старомодный Javascript для работы эффекта AJAX. Учитывая ваш текущий запрос, учитывая тот факт, что на вашем веб-сайте уже есть некоторые продвинутые потребности в Javascript, я рекомендую вам проверить jQuery - тогда вы могли бы сделать что-то подобное (упрощенно, конечно, но, возможно, Достаточно, чтобы вы отправились в путь):

<ul id='menu'>
    <li><a href="pages/Home.html" class="home"><span>Home</span></a></li>
    <li><a href="pages/About.html" class="about"><span>About</span></a></li>
    <li><a href="pages/Services.html" class="services"><span>Services</span></a></li>
    <li><a href="pages/Portfolio.html" class="portfolio"><span>Portfolio</span></a></li>
    <li><a href="pages/Contact.html" class="contact"><span>Contact</span></a></li>
</ul>

А затем позвольте вам заменить монроши, которые у вас есть для Javascript, на:

$(function() {
    $('a', '#menu').click(function() { // when someone clicks on a menu link...
        // get the page contained in the links href attribute....
        $.get($(this).attr('href'), function(html) {
            // once the content is here, animate the content div...
            $('#MainContent').animate({
                height: '20px' // make the div smaller....
            }, 'fast', function() {
                // when it is all the way down, update the div with the new
                // html, and animate it back up....
                $(this).html(html).animate({
                    height: 'auto'
                }, 'fast');
            });
        });
        return false;
    });
});

Это сделает ваш сайт:

1. Более совместима с различными браузерами, поскольку jQuery устраняет любые несовместимости.
2. Более совместимый со стандартами / передовой практикой (т.е. без встроенного Javascript)
3. Более доступно для людей с отключенным Javascript. Как сейчас, если у меня не включен Javascript (~ 5% людей), и я нажимаю на любую из ссылок вашего меню, ничего не произойдет. С этим решением, по крайней мере, будет отображаться содержимое страницы, хотя вы могли бы сделать некоторый код на стороне сервера, чтобы сделать так, чтобы вся страница отображалась, если запрос не приходит из Javascript.

Answer 2

Попробуйте сценарий. Вот некоторые демонстрации . Effect.Grow и Effect.Shrink, кажется, соответствуют вашим потребностям. Обратите внимание, что вы не будете делать это с окном, скорее DIV.