Javascript Ajax开放、关闭效果

谁能告诉我如何制作这样的动画：

在我当前的站点中，这是

dageniusmarketer.com/DigitalWonderland/

我想让你看到所有文本内容的窗口在你通过导航链接打开新页面时打开和关闭（关闭旧内容，打开新内容）。我不是一个程序员，只是一个新手，为当前的窗口设置复制了一些ajax代码。所有当前窗口代码都在index.html中。我不知道我需要在我当前的代码中添加什么才能使它按照我要求的方式工作。谁能给我指出正确的方向吗

---

谢谢

试试scriptaculous。给你。效果。成长和效果。收缩似乎适合你的需要。请注意，您不会在窗口中执行此操作，更可能是在DIV中执行此操作。

请尝试scriptaculous。给你。效果。成长和效果。收缩似乎适合你的需要。请注意，您不会使用窗口（更可能是DIV）来执行此操作。

我在您网站的源代码中看到，您正在使用一些非常老派的Javascript来实现AJAX效果。考虑到您的网站上已经有了一些高级Javascript需求，请记住您当前的请求，我建议您检查一下-然后您可以执行类似的操作（当然，简化了，但可能已经足够让您上路了）：

这将使您的网站：

更具跨浏览器兼容性，因为jQuery将任何不兼容性抽象出来

更符合标准/最佳实践（即，无内联Javascript）

禁用Javascript的人更容易访问。就像现在一样，如果我没有启用Javascript（约5%的人），我点击你的任何菜单链接，一切都不会发生。使用此解决方案，页面内容至少会显示出来，不过您可以编写一些服务器端代码，以便整个页面显示请求是否来自Javascript

---

我在你网站的源代码中看到，你正在使用一些非常老派的Javascript来实现AJAX效果。考虑到您的网站上已经有了一些高级Javascript需求，请记住您当前的请求，我建议您检查一下-然后您可以执行类似的操作（当然，简化了，但可能已经足够让您上路了）：

这将使您的网站：

更具跨浏览器兼容性，因为jQuery将任何不兼容性抽象出来

更符合标准/最佳实践（即，无内联Javascript）

禁用Javascript的人更容易访问。就像现在一样，如果我没有启用Javascript（约5%的人），我点击你的任何菜单链接，一切都不会发生。使用此解决方案，页面内容至少会显示出来，不过您可以编写一些服务器端代码，以便整个页面显示请求是否来自Javascript

<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>

$(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;
    });
});