EDITED

Question

我正在为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中创建更大的对应物，这些对应物在装载时附着到展示区域。附加的图像相互堆叠，以实现平滑的过渡效果，加载的最新图像正在动画，同时也阻止其他兄弟的动画。在取消切换时，我想在所有动画停止后缩放回原始图片时创建超时。我试图使用.children（'img：last'）。队列（function（）{}）将缩放效果排队到最新的子节点，但是因为它们与load事件异步加载，它们的序列不清楚，而且一次动画完成，如果我们不快速取消，它会采用不透明度1并从父节点中删除其他兄弟节点。因此，我们很难猜出我们将队列绑定到哪个孩子。

编辑2 ：现在我稍微修改了我的代码，并且我只在加载后将img附加到div，所以最后加载的内容始终可用于img：last selector，但是告诉我，这也没有防止bug。

现在我认为最好是做这样的事情：

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

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

Answer 1

我不确定我是否正确理解了这个问题，但似乎每次用户点击＆＃34;开始＆＃34;时，图像都应该出现并且数字会增加！如果是这样的话：

请参阅此小提琴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>

EDITED

根据评论的要求编辑，仅在排队的动画为空时更新#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;
}

Answer 2

由于动画的时间是恒定的，结果只是在适当的时刻捕捉它，我决定使用一般变量，所以在开始动画之前我将变量设置为动画长度

例如。

time=400;

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

Answer 3

我试图做的事情似乎根本不可能。

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

为孩子的动画创建步骤并设置完成它所需的时间。

然后取这个变量，设置超时，这样就可以在动画之后执行。

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

最终完成了我的任务。

Answer 4

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

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

jquery队列到父而不是特定的孩子？

4 个答案:

EDITED