Ajax 打开、关闭效果答案

【问题标题】：Ajax Open, Close EffectAjax 打开、关闭效果
【发布时间】：2009-06-14 01:04:20
【问题描述】：

谁能告诉我怎么做这样的动画：

http://dageniusmarketer.com/DigitalWonderland/Animation

在我当前的网站内，即

dageniusmarketer.com/DigitalWonderland/

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

谢谢

【问题讨论】：

标签： javascript html ajax animation

【解决方案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;
    });
});

这将使您的网站：

更多的跨浏览器兼容，因为 jQuery 抽象出所有不兼容的地方。
符合更多标准/最佳实践（即，没有内联 Javascript）
禁用 Javascript 的人更容易访问。就像现在一样，如果我没有启用 Javascript（大约 5% 的人）并且我点击了您的任何菜单链接，则不会发生任何事情。使用此解决方案至少会显示页面内容，尽管您可以执行一些服务器端代码来制作它，以便在请求不是来自 Javascript 时显示整个页面。

【讨论】：

【解决方案2】：

试试scriptaculous。这里是some demos。 Effect.Grow 和 Effect.Shrink 似乎符合您的需求。请注意，您不会对窗口执行此操作，更可能是 DIV。

【讨论】：