jQuery的 - 如何按顺序运行动画*只有一次*对一组动画后（如兄弟姐妹） [英] jQuery - How to sequentially run an animation * only once * after animation on a group (e.g. siblings)
问题描述
下面是我的两难困境。我有2个动画，需要按顺序运行。
第一动画通过jQuery的兄弟姐妹获得一组元素的运行（）功能。
第二个动画的单个元素上运行。 （唯一赖以兄弟姐妹（）被调用。）这就需要第一个动画结束后发生。
如果我不使用队列（）或回调的第一个动画后，它们同时运行。
如果我不使用队列（）或后的第一个回调，那么第二个动画结束（每个兄弟姐妹的一次）运行无数次。
那么，如何成功地排队动画一组动画完成后，运行一次？
的（我发现工作的黑客，但我希望有做到这一点适当的方式。）的
感谢。
简单的例子：
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;测试网页＆LT; /标题＆GT;
＆LT;风格＆GT;
＆LT;！ -
.fadebutton，.resizebutton {
光标：指针;
颜色：白色;
保证金：10px的0 10px的0;
背景：蓝色;
填充：2px的;
显示：表;
}
.box的{
宽度：100像素;
高度：100像素;
背景：橙色;
保证金：10px的;
浮动：左;
}
- ＆GT;
＆LT; /风格＆GT;
＆所述; SCRIPT SRC =http://www.google.com/jsapi＆GT;＆下; /脚本＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;的google.load（jQuery的，1.3.2）;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（'文件'）。就绪（函数（）{
$（'。resizebutton'）切换（函数（）{$（本）.parent（）动画（{宽度：'+ = 50像素'，高度：'+ = 50px的'}，1000）;}，
。函数（）{$（本）.parent（）动画（{宽度：' - = 50像素，高度： - = 50px的'}，1000）; }）;
$（'。fadebutton'）。点击（函数（）{
变量$ theBox = $（本）.parent（）;
$ theBox.siblings（）淡出。（1000，函数（）{$ theBox.find（）点击（）resizebutton。';}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV＆GT;
＆LT; DIV CLASS ='盒子'＆GT;＆LT; DIV CLASS ='fadebutton'＆GT;淡出＆LT; / DIV＆GT;＆LT; DIV CLASS ='resizebutton'＆GT;调整大小＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS ='盒子'＆GT;＆LT; DIV CLASS ='fadebutton'＆GT;淡出＆LT; / DIV＆GT;＆LT; DIV CLASS ='resizebutton'＆GT;调整大小＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS ='盒子'＆GT;＆LT; DIV CLASS ='fadebutton'＆GT;淡出＆LT; / DIV＆GT;＆LT; DIV CLASS ='resizebutton'＆GT;调整大小＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS ='盒子'＆GT;＆LT; DIV CLASS ='fadebutton'＆GT;淡出＆LT; / DIV＆GT;＆LT; DIV CLASS ='resizebutton'＆GT;调整大小＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS ='盒子'＆GT;＆LT; DIV CLASS ='fadebutton'＆GT;淡出＆LT; / DIV＆GT;＆LT; DIV CLASS ='resizebutton'＆GT;调整大小＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT; DIV的风格=明确：两者;填充：0 0 10px的0;＆GT;点击调整大小按钮触发切换增加或减少框的大小和LT; / DIV方式＆gt;
＆LT; DIV＆GT;点击'褪色'按钮变淡框的兄弟姐妹，然后在盒子触发调整大小按钮。麻烦的是，因为有兄弟姐妹调整大小被炒鱿鱼多次＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
贵黑客是这个样子？
$（'。fadebutton'）。点击（
功能（）
{
变量$ theBox = $（本）.parent（）;
VAR doneOnce = FALSE;
$ theBox.siblings（）
.fadeOut（1000，
功能（）
{
如果（！doneOnce）
{
doneOnce =真;
$ theBox.find（'resizebutton。'）点击（）。
}
}
）;
这里是工作code。
Here's my dilema. I have 2 animations that need to run sequentially.
The first animation runs on a group of elements acquired through jQuery's siblings() function.
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.
If I don't use queue() or a callback after the first animation, they run simultaneously.
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).
So how do I successfully queue an animation to run ONCE after a group animation?
(I found a hack that works, but I'm hoping there's a proper way to accomplish this.)
Thanks.
Simplified example:
<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();
}
}
);
Here is the working code.
这篇关于jQuery的 - 如何按顺序运行动画*只有一次*对一组动画后（如兄弟姐妹）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
