Question

我试图在页面加载时依次按顺序为多个div设置动画，一个接着一个。当我点击进入另一个页面时，我也希望反向按顺序淡出。我如何在jquery中设置它？

Answer 1

很难给你一个例子，因为有很多方法可以在jQuery中制作动画，但这是一个简单的例子。动画两个<div>，一个接一个地（在页面加载时）：

请参阅此处的工作示例：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);
    }
);

以下是发生的事情：

页面上有两个<div>，其中包含CSS opacity: 0
加载页面时，ID为<div>的{{1}}会在不透明度0到不透明度为1的700毫秒内设置动画。
animation-one s动画完成后，另一个animation-one（标识为<div>）以类似方式启动动画。

现在，淡出animation-two是类似的。我假设您的链接只是指向另一个页面，所以我暂停了该链接的以下内容，直到动画结束：

这假设您的链接<div>的ID为<a>，但实际上它可以是任何选择器：

HTML：

next-page

JavaScript的：

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

以下是发生的事情：

当点击标识为$("#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; }); }) });的链接时，会出现与上述类似的动画序列，但反之亦然。
在最后一个动画发生后，正确跟踪链接。

我认为看到上面链接中的示例应该会有所帮助。另外，请确保并查看animate的文档。

希望有所帮助！

修改：添加指向其他示例的链接，因为OP想要同时为多个next-page制作动画：http://jsfiddle.net/andrewwhitaker/n3GEB/。这会将常用代码移动到函数中，并希望使示例更易于阅读。

Answer 2

请注意，jQuery动画函数将回调作为最终参数。动画完成后调用此函数。您将在此回调中开始设置下一个DIV的动画。另一种选择是fxQueues。

离开页面时没有完美的方法来反转动画。您可以通过以下方式执行以下操作来为页面上的链接执行此操作：

$("a").click(function()
{
    var target = $(this).href;
    // Do animation
    // In the final completion callback, do
    window.location.href = target;
});

（注意我不保证这是有效的，它只是伪代码）

Answer 3

我会考虑使用回调和队列。

看看这个：

jQuery queue events http://api.jquery.com/queue/

希望这对你来说是一个正确的方向。

使用Jquery动画分割一个人

3 个答案: