使用 Jquery 为 Div 一个接一个地制作动画

我正在尝试对多个 div 进行动画处理，在页面加载时按顺序淡入。当我单击转到另一个页面时，我也想反向执行此操作，按顺序淡出。我该如何在 jquery 中进行设置？

很难给你一个例子，因为 jQuery 有很多动画方法，但这里有一个简单的例子。动画两个<div>s，一个接一个（页面加载时）：

请参阅此处的工作示例：http://jsfiddle.net/andrewwhitaker/p7MJv/ http://jsfiddle.net/andrewwhitaker/p7MJv/

HTML:

<div id="animation-one">Hello!</div>
<div id="animation-two">Jquery Animate!</div>

CSS:

#animation-one,
#animation-two
{
    opacity:0;
    top: 30px;
    width: 400px;
    height: 100px;
    background-color:#00CCCC;
    font-size:35pt;
    position:absolute;
}

#animation-one
{
    background-color:#CCCC33;
    top:130px;
}

JavaScript：

$("#animation-one").animate({
    opacity:1.0}, 700,
    function() {
        // Callback function: This is called when 'animation-one'
        // is finished.
        $("#animation-two").animate({
            opacity: 1.0
        }, 700);
    }
);

这是发生的事情：

• Two <div>s 位于带有 CSS 的页面上opacity: 0
• 当页面加载时，<div>带身份证animation-one从不透明度 0 到不透明度 1 的动画持续时间为 700 毫秒。
• 之后animation-one动画已经结束了，再来一个<div>（带有 IDanimation-two）有一个以类似方式开始的动画。

现在，淡出<div>s 是类似的。我假设您的链接只是重定向到另一个页面，因此我暂停了该链接的以下内容，直到动画完成：

这假设您有一个链接<a>id 为next-page，但实际上它可以是任何选择器：

HTML:

<a id="next-page" href="http://www.google.com">Google</a>

JavaScript：

$("#next-page").click(function($event) {
    $event.preventDefault();
    var href = $(this).attr("href");

    $("#animation-two").animate({
        opacity: 0}, 700,
        function() {
            // Callback function:  This is called when 'animation-two'
            // is finished.
            $("#animation-one").animate({
                opacity: 0}, 700,
                function() {
                    // Direct the user to the link's intended
                    // target.
                    window.location = href;
                });
    })
});

这是发生的事情：

• 当链接带有idnext-page单击时，会出现与上述类似的动画序列，但方向相反。
• 最后一个动画出现后，链接将被正确跟踪。

我认为查看上面链接中的示例应该有所帮助。另外，请确保并查看文档animate http://api.jquery.com/animate/.

希望有帮助！

Edit:由于OP想要为多个动画添加一个链接到另一个示例<div>立即：http://jsfiddle.net/andrewwhitaker/n3GEB/ http://jsfiddle.net/andrewwhitaker/n3GEB/。这会将通用代码移至函数中，并有望使示例更易于阅读。