如何在一组动画（例如兄弟姐妹）之后顺序运行动画*仅一次*答案

【问题标题】：How to sequentially run an animation * only once * after animation on a group (e.g. siblings)如何在一组动画（例如兄弟姐妹）之后顺序运行动画*仅一次*
【发布时间】：2009-11-11 02:18:44
【问题描述】：

这是我的困境。我有 2 个动画需要按顺序运行。

第一个动画在一组通过 jQuery 的siblings() 函数获取的元素上运行。

第二个动画在单个元素上运行。（调用siblings() 的那个。）这需要在第一个动画完成后进行。

如果我在第一个动画之后不使用queue() 或回调，它们会同时运行。

如果我在第一个之后使用queue() 或回调，那么第二个动画最终会运行多次（每个兄弟姐妹一次）。

那么我如何成功地将动画排队以在组动画之后运行一次？

（我发现了一个可行的 hack，但我希望有合适的方法来完成它。）

简化示例：

<html>
<head>
<title>tester page</title>
<style> 
 <!--
.fadebutton, .resizebutton {
cursor: pointer;
color: white;
margin: 10px 0 10px 0;
background: blue;
padding: 2px;
display: table;
}
.box {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
float: left;
}
 -->
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript"> 
$('document').ready(function() {
$('.resizebutton').toggle(  function() { $(this).parent().animate({width: '+=50px', height: '+=50px'}, 1000); },
        function() { $(this).parent().animate({width: '-=50px', height: '-=50px'}, 1000); });
$('.fadebutton').click(function() {
 var $theBox = $(this).parent();
 $theBox.siblings().fadeOut(1000, function() { $theBox.find('.resizebutton').click(); });
});
});
</script>
</head>
<body>
<div>
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div>
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div>
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div>
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div>
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div>
</div>
<div>
<div style="clear: both; padding: 0 0 10px 0; ">Clicking the 'resize' button triggers a toggle that increase or decreases the box's size.</div>
<div>Clicking on the 'fade' button fades the box's siblings, then triggers the 'resize' button in that box. Trouble is that the 'resize' gets fired as many times as there are siblings.</div>
</div>
</body>
</html>

【问题讨论】：

标签： jquery animation callback queue

【解决方案1】：

你的 hack 看起来像这样吗？

$('.fadebutton').click(
function() 
{
 var $theBox = $(this).parent();
 var doneOnce = false;
 $theBox.siblings()
        .fadeOut(1000, 
             function() 
             { 
                  if(!doneOnce)
                  {
                  doneOnce = true;
                  $theBox.find('.resizebutton').click(); 
                  }
             }
 );

Here 是工作代码。

【讨论】：

啊，这看起来比我的好。我只是有一个动画，它基本上没有与兄弟姐妹（）动画平行运行。所以我能够对那个单一的动画进行回调。我更喜欢你的。所以听起来这是 jQuery 的一个（次要）缺点，它只能通过像你给出的那样的黑客来修复。没什么大不了的，我猜。感谢您的帮助！
嗯，如果我打算扩展 $.animate() 函数以添加一个播放标志，我可能会以类似的方式实现。
嗨！我注意到这是一个非常古老的问题，我在这里面临同样的问题。现在有没有“正确”的方法来做到这一点？我似乎找不到任何关于此事的信息。
我想说正确的方法就是有效的方法。 ;-) 我的方式很好，如果我必须这样做，我会这样做。

【解决方案2】：

您应该能够通过将回调传递给第一个动画来触发第二个动画，以便通知您它已完成。

【讨论】：

除非我误解了你，否则我在问题中表示这样做会导致回调运行多次（每个兄弟运行一次）。我希望它只运行一次。我的示例有一个回调，它运行多次而不是一次。这就是您所说的“将回调传递给第一个动画”的意思吗？