使用 Jquery 一个接一个地为 Div 设置动画

Posted 2023-05-08

【中文标题】使用 Jquery 一个接一个地为 Div 设置动画

【英文标题】：Animate Divs One Right After the Other with Jquery

【发布时间】：2011-05-26 06:58:29

【问题描述】：

我正在尝试为多个 div 设置动画，在页面加载时一个接一个地依次淡入。当我单击转到另一个页面时，我也想反向执行，依次淡出。我该如何在 jquery 中进行设置？

【问题讨论】：

除非您想让您的用户感到沮丧，否则不要在他们点击链接和下一页加载之间添加任何动画。 MS 转换 (msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx) 没有起飞是有原因的

【参考方案1】：

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

在此处查看工作示例：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>s 在页面上有CSS opacity: 0 加载页面时，ID 为 animation-one 的 <div> 会在 700 毫秒的时间内从不透明度 0 变为不透明度 1。 animation-ones 动画完成后，另一个<div>（ID 为animation-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;
                );
    )
);

这是发生了什么：

当点击 id next-page 的链接时，会出现与上述类似的动画序列，但相反。 最后一个动画出现后，链接正确跟随。

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

希望有帮助！

编辑： 添加指向另一个示例的链接，因为 OP 想要一次为多个 <div>s 设置动画：http://jsfiddle.net/andrewwhitaker/n3GEB/。这会将通用代码移动到函数中，并有望使示例更易于阅读。

【参考方案2】：

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

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

$("a").click(function()

    var target = $(this).href;
    // Do animation
    // In the final completion callback, do
    window.location.href = target;
);

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

【讨论】：

回调函数的例子请看这个问题：***.com/questions/668104/jquery-queueing-animations

【参考方案3】：

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

看看这个：

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

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