jQuery - 如何顺序运行动画*只有一次*动画后的组（例如兄弟姐妹） [英] jQuery - How to sequentially run an animation * only once * after animation on a group (e.g. siblings)
问题描述
这是我的dilema。我有两个动画需要顺序运行。
Here's my dilema. I have 2 animations that need to run sequentially.
第一个动画运行在通过jQuery的 siblings（）获取的一组元素 function。
The first animation runs on a group of elements acquired through jQuery's siblings() function.
第二个动画运行在单个元素上。 （ siblings（）被调用的那个。）这需要在第一个动画完成后发生。
The second animation runs on a single element. (The one upon which siblings() was called.) This needs to take place after the first animation has finished.
如果我不使用 queue（）或第一个动画后的回调，它们会同时运行。
If I don't use queue() or a callback after the first animation, they run simultaneously.
如果我使用 queue（）或第一个后的回调，那么第二个动画结束运行多次（每个兄弟姐妹一次）。
If I do use queue() or a callback after the first, then the second animation ends up running numerous times (once for each of the siblings).
那么，如何成功地将一个动画排成队列以在组动画后运行ONCE？
So how do I successfully queue an animation to run ONCE after a group animation?
）
感谢。
简化示例：
<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>
推荐答案
你的黑客看起来像这样吗？ >
Does your hack look something like this?
$('.fadebutton').click(
function()
{
var $theBox = $(this).parent();
var doneOnce = false;
$theBox.siblings()
.fadeOut(1000,
function()
{
if(!doneOnce)
{
doneOnce = true;
$theBox.find('.resizebutton').click();
}
}
);
这里是工作代码。
这篇关于jQuery - 如何顺序运行动画*只有一次*动画后的组（例如兄弟姐妹）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
