按顺序对 each() 返回的元素进行动画处理答案

【问题标题】：Animate returned elements from each() in order按顺序对 each() 返回的元素进行动画处理
【发布时间】：2010-07-11 18:28:44
【问题描述】：

我正在使用此脚本为锚点内的一些图像设置动画：

$('#locations a').each(function() {
        // set opacity 0 take initial position
        $(this).css('opacity', '0');
        var left = $(this).css('left');
        var top = $(this).css('top');

        // reset position and animate
        $(this).css({'left' : '0', 'top' : '0'});
        $(this).animate({left: left, top: top, opacity: 1});
    });

我需要使用 jquery each() 函数来获取初始位置。但是，我想按顺序为返回的元素设置动画。这可能吗？

【问题讨论】：

标签： javascript jquery queue sequence jquery-animate

【解决方案1】：

你可以用一种不太复杂的方式来做这件事，像这样：

$('#locations a').each(function(i) {
    var left = $(this).css('left'),
        top = $(this).css('top');

    $(this).css({opacity: 0, left: 0, top: 0})
           .delay(400 * i)
           .animate({left: left, top: top, opacity: 1});
});

You can test it here。它主要是简化，唯一重要的补充是.delay(400 * i) 和i 到function(i) {。

这只是使用i 作为.each() 回调的第一个参数，并将.delay()（在 this 元素上开始动画之前的延迟）乘以每个元素的数量. 400 代表.animate() 的default duration 为400ms。所以第一个元素立即开始，下一个在 400 毫秒后开始，下一个在 800 毫秒后开始，依此类推……就在它之前的动画应该结束的时候。

您当然可以制作自定义队列等...但这似乎更简单:)

编辑：由于您对构建队列感兴趣，它看起来像这样：

$('#locations a').each(function(i) {
    var left = $(this).css('left'),
        top = $(this).css('top'),
        a = $(this).css({opacity: 0, left: 0, top: 0});

    $(document).queue('myQueue', function(n) {
      a.animate({left: left, top: top, opacity: 1}, n);
    });
});
$(document).dequeue('myQueue');

You can test it here，我们使用.queue() 将自定义队列中的函数排队到document，然后使用.dequeue() 启动它。 n 是队列中的下一个函数，当 .animate() 完成时，我们通过提供它作为回调函数运行来调用它。

【讨论】：

感谢您的想法。我知道 function(index) {} 和 .delay() 但是乘以 * i 是一个不错的技巧。我仍然想知道如何在 each() 中构建自定义队列然后运行它
@NGAGE - 我添加了如何执行此操作，因为您对该路线感兴趣 :)
非常感谢您抽出宝贵时间！在 Firefox 中它工作正常，但在第二个动画之后我在 IE8 上得到一个奇怪的错误（非常奇怪）。你可以在这里看到一个活生生的例子：bit.ly/cuhWIG
@NGAGE - 这是因为#romania 有一个right: 位置......在其他浏览器中获得left 有效，但在IE 中它返回"auto"，您无法制作动画。您需要检查右/左是否为自动，仅当它们不是时才设置动画，如下所示：jsfiddle.net/7QTUL
我也有一些位置有 position: absolute;底部。因此，我将所有内容都更改为 left 和 top 并且它正在工作。再次感谢！您是否注意到 IE8 中 png 的模糊/黑色边缘（动画发生时）？不知道能不能修好？

【解决方案2】：

您可以在 jQuery 中设置自己的自定义队列。

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

使用您要执行的所有功能填充您的队列。
1. 队列中的每个函数都是一个动画。
2. 使用 each() 循环填充队列。
启动队列以启动第一个动画。
在每个动画函数的回调中，调用dequeue()函数启动下一个动画。

基于您的评论的示例

我创建了一个名为“MyCustomQueue”的自定义队列，并随意将它放在body标签上。我使用 JavaScript 闭包通过设置一个名为“this$”的变量来为队列的每个函数中的特定元素设置动画。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Queues Me</title> 
    <style> 
        a { 
            position:relative;
            top:0;
            left:0;
        }
    </style> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 

        $(function () {

            $('#locations a').each(function () {

                var this$ = $(this);

                // set opacity 0 and take initial position 
                this$.css('opacity', '0');
                var left = this$.css('left');
                var top = this$.css('top');


                // reset position and populate the queue with animations 
                this$.css({ 'left': '420px', 'top': '1820px' });

                $('body').queue("MyCustomQueue", function () {
                    this$.animate({ left: left, top: top, opacity: 1 }, 500, function () {
                        $('body').dequeue("MyCustomQueue");
                    });
                });
            });

            $('body').dequeue("MyCustomQueue");

        });

    </script> 
</head> 
<body> 
    <div> 
        <div id="locations"> 
            <ul> 
                <li><a href="#">Foo</a></li> 
                <li><a href="#">Moo</a></li> 
                <li><a href="#">Poo</a></li> 
                <li><a href="#">Woo</a></li> 
                <li><a href="#">Zoo</a></li> 
            </ul> 
        </div> 
    </div> 
</body> 
</html>

【讨论】：

$('#locations a').each(function() { // 设置不透明度 0 并取初始位置 $(this).css('opacity', '0'); var left = $(this).css('left'); var top = $(this).css('top'); // 重置位置并用动画填充队列 $(this).css({'left' : '420px', 'top' : '1820px'}); $(this).queue(function() { $(this).animate({left: left, top: top, opacity: 1}, 500, function( ) {$(this).dequeue()}); }); });我填充了队列并在每个队列上调用了 dequeue()。我现在如何开始排队？