我正在对 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 保护.
现在我在想最好的办法是做这样的事情:
- 为所有孩子获取 isAnimated。
- 如果动画 - 获取持续时间并设置超时事件。
- 如果否 - 直接执行事件。
但问题是我不知道如何获得动画的剩余持续时间。如果您对此提出一些建议,那将有很大帮助。谢谢