代码之家 › 专栏 › 技术社区 › user113716

如何在组(例如兄弟姐妹)上的动画后仅按顺序运行动画一次。

queue callback animation jquery

user113716 · 技术社区 · 14 年前

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

第一个动画运行在通过jquery获取的一组元素上 siblings() 功能。

第二个动画在单个元素上运行。(在其上 兄弟姐妹() 需要在第一个动画完成后进行。

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

如果我使用 队列() 或者在第一个动画之后进行回调,然后第二个动画运行多次(每个兄弟姐妹运行一次)。

那么,如何成功地将动画排队,以便在组动画之后运行一次呢?

(我发现了一个有效的黑客,但我希望有一个合适的方法来完成这项工作。)

简化示例:

<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>

2 回复 | 直到 7 年前

Ryan Lynch 14 年前

你的黑客看起来像这样吗?

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

Here 是工作代码。

Christopher Stott 14 年前

您应该能够通过传入第一个动画的回调来触发第二个动画,这样就可以通知您它完成了。

如何在组(例如兄弟姐妹)上的动画后仅按*顺序运行动画一次*。

如何在组(例如兄弟姐妹)上的动画后仅按顺序运行动画一次。