use*_*716 2 queue jquery animation callback
这是我的困境.我有2个需要按顺序运行的动画.
第一个动画运行在通过jQuery siblings()函数获取的一组元素上.
第二个动画在单个元素上运行.(siblings()被调用的那个.)这需要在第一个动画完成后进行.
如果我queue()在第一个动画后没有使用或回调,它们会同时运行.
如果我queue()在第一个动画之后使用或回调,那么第二个动画最终会运行多次(每个兄弟姐妹一次).
那么如何在组动画后成功排队动画以运行ONCE？
(我找到了一个有效的黑客,但我希望有一个正确的方法来完成这个.)
简化示例:
<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>
你的黑客看起来像这样吗？
$('.fadebutton').click(
function()
{
var $theBox = $(this).parent();
var doneOnce = false;
$theBox.siblings()
.fadeOut(1000,
function()
{
if(!doneOnce)
{
doneOnce = true;
$theBox.find('.resizebutton').click();
}
}
);
这是工作代码.