javascript - Ajax打开、关闭效果

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 的 montrocity:

$(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 时显示整个页面。