0

我正在对 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 选择器，但有些东西告诉我，这也不受 bug 保护.

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

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

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

4

4 回答 4

0

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

请参阅此 Fiddle工作示例！

查询

$('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>

已编辑

根据评论的要求编辑，仅当排队动画为空时更新#gotcha。

查看新的Fiddle 示例！

HTML

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

查询

// 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;
}
于 2012-05-12T21:18:00.610 回答
0

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

例如。

time=400;

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

于 2012-05-13T19:24:17.313 回答
0

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

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

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

然后取这个变量，并设置超时，所以它会在动画之后执行。

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

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

于 2012-06-11T18:47:50.447 回答
0

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

$(parentElement).children().promise().done( function() {
  alert("Animation complete!");
}
于 2012-11-04T02:40:02.197 回答