如何在一个组(例如同级)上的动画之后顺序播放动画*仅一次* [英] How to sequentially run an animation * only once * after animation on a group (e.g. siblings)
问题描述
这是我的难题.我有2个需要顺序运行的动画.
Here's my dilemma. I have 2 animations that need to run sequentially.
第一个动画在通过jQuery的siblings()函数获取的一组元素上运行.
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).
那么如何在组动画之后成功地将动画排队以运行一次?
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();
}
}
);
此处是有效代码.
这篇关于如何在一个组(例如同级)上的动画之后顺序播放动画*仅一次*的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
