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

这将使您的网站：

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

Answer 2

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

Ajax打开，关闭效果

2 个答案: