【问题标题】：jquery queue to parent rather than specific children?jquery队列到父母而不是特定的孩子？
【发布时间】：2012-05-12 20:00:51
【问题描述】：

我正在为 div 的孩子制作一些动画，孩子们在悬停时一次制作一个动画，而另一个正在停止，有时也会被移除。我想要的是当所有动画停止/停止/或不再移动时的回调 - 换句话说。

...我试图做这样的事情，直接排队到父母，但这似乎根本不起作用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" >
            $(document).ready(function(){   

                $('div.start').click(function(){

                    $('<img style="display:block;display:none;" src="http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg">')
                    .appendTo($(this))
                    .animate({opacity:0},0)
                    .css('display','block')
                    .animate({opacity:1},2000,function(){});

                    $(this).queue(function(){
                        $('#gotcha').html(1+parseInt($('#gotcha').html()));
                    });

                });         
            });
            </script>
        <style>
            div.start{
                background-color:#0057D8;
                width:100px;
                float:left;
            }
            div#gotcha{
                float:left;
                width:100px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="start">Start</div>
        <div id="gotcha">
            0
        </div>
    </body>
</html>

应该在动画完成后更改数字，但这从未发生过。我还有其他方法可以做吗？或者也许以某种方式获取 fx 的剩余时间，并使用 setTimeout？

感谢任何建议。

编辑：我为什么要这样做？

实际上，我有一系列小拇指图像，在将它们悬停时，它们会在 dom 中创建更大的对应物，这些对应物在加载时会附加到展示 div。附加的图像相互堆叠，以实现平滑的过渡效果，最新加载的图像正在动画，同时也阻止其他兄弟姐妹动画。悬停后，我想在所有动画停止后创建一个超时以缩放回原始图片。我尝试使用 .children('img:last').queue(function(){}) 将缩放返回效果排队到最新的孩子，但是因为它们是与加载事件异步加载的，所以它们的顺序不清楚，而且一次动画完成了，如果我们不快速取消悬停，它会采用 opacity 1 并从父级中移除其他兄弟姐妹。所以真的很难猜到我们应该将队列绑定到什么孩子。

编辑 2：现在我稍微修改了我的代码，我只在加载后将 img 附加到 div，所以最后加载的总是可用 img: last 选择器，但是有些告诉我这也不受错误保护。

现在我想最好的办法是做这样的事情：

为所有孩子获取 isAnimated。
如果动画 - 获取持续时间并设置超时事件。
如果否 - 直接执行事件。

但问题是我不知道如何获得动画的剩余持续时间。如果您对此提出一些建议，那将有很大帮助。谢谢

【问题讨论】：

标签： javascript jquery animation queue children

【解决方案1】：

我不确定我是否正确理解了这个问题，但似乎每次用户单击“开始”时，图像都会出现并且数量会增加！如果是这样：

看到这个小提琴working example!

JQUERY

$('div.start').click(function(){
  var $me = $(this),
      src = 'http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg';

  $('<img style="display:block;display:none;" src="'+src+'">')
    .appendTo($me)
    .css({"display":"block", "opacity":0})
    .animate({opacity:1},2000,function(){
      $('#gotcha').html(1+parseInt($('#gotcha').html()));
    });
});

CSS

div.start {
  background-color:#0057D8;
  width:100px;
  float:left;
}
div#gotcha {
  float:left;
  width:100px;
}

HTML

<div></div>
<div class="start">Start</div>
<div id="gotcha">0</div>

已编辑

已根据 cmets 的要求编辑，仅在排队动画为空时更新 #gotcha。

查看新的Fiddle example!

HTML

<div class="start">Start</div>
<div id="gotcha">0</div>

JQUERY

// Jquery Object and image SRC
var $me = $('div.start'),
    src = 'http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg';

// On click over "start"
$me.on("click", function(){
    $('<img style="display:block;display:none;" src="'+src+'">')
        .appendTo($me)                                // append img to div
        .css({"display":"block", "opacity":0})        // hide img
        .animate({opacity:1},2000, function() {       // animate
            if ($me.queue('fx').length==0) {          // if queue is empty
                $('#gotcha').html("1");               // update #gotcha to 1
            }
        });
});

CSS

div.start {
    background-color:#0057D8;
    width:100px;
    float:left;
}
div#gotcha {
    float:left;
    width:100px;
}

【讨论】：

aww，对不起，你弄错了，我承认我举个例子并不准确。这只是为了证明我们不能像那样排队等候父母。只有在所有活动停止后，这个数字才会增加......这与此无关
好的！没问题。 我只需要更好地了解您的目标。用户点击“开始”，动画执行，数量增加！如果在我发布的示例中完成该部分。但是你说“所有活动都停止了”！你能详细说明一下吗？
好吧，注意我们可以点击 10 次、100 次，然后继续点击更多——它们会弹出更多。但是只有在最后一个弹出时才会触发回调。我的问题实际上已被编辑以提供一些具体细节。现在我已经让位于最后一个加载的孩子的回调排队，同时清除其他较旧的回调。但我仍然希望我们可以在不依赖特定孩子的队列的情况下进行回调，特别是如果它会因为某种原因被窃听——谁知道呢。
还是不要跟！！你能举一个实际的例子说明为什么只有当用户停止点击“开始”时才需要增加数字，比如说一百万次？ :)
为了帮助您，更好地理解“现实生活”问题将帮助我们:)（通过阅读您的问题和您在此处发布的最后一条评论，我很困惑！ )

【解决方案2】：

由于动画的时间是恒定的，结果只是在正确的时刻抓住它，我决定使用通用变量，所以在开始动画之前我将变量设置为动画长度.

例如。

time=400;

然后我用这个计时器制作动画。稍后我可能会为动画添加步进函数以更精确地确定数字...

【讨论】：

【解决方案3】：

我试图做的事情看起来简直是不可能的。

提出的问题的解决方案如下：

为孩子的动画制作步骤并设置完成所需的时间。

然后取这个变量，设置超时时间，让它在动画结束后执行。

也有可能任何孩子都可以写入该变量，因此我们不需要搜索它们。

最后它完美地完成了我的任务。

【讨论】：

【解决方案4】：

据我所知，您正在尝试在给定元素集合的所有动画完成后运行回调。在这种情况下，父元素的子元素：

$(parentElement).children().promise().done( function() {
  alert("Animation complete!");
}

【讨论】：