Как последовательно запустить анимацию * только один раз * после анимации в группе (например, братья и сестры) - PullRequest
Новая
       29

Как последовательно запустить анимацию * только один раз * после анимации в группе (например, братья и сестры)

2 голосов
/ 11 ноября 2009

Вот моя дилемма. У меня есть 2 анимации, которые должны запускаться последовательно.

Первая анимация запускается для группы элементов, полученных с помощью функции siblings() в jQuery.

Вторая анимация запускается на одном элементе. (Тот, на котором был вызван siblings().) Это должно произойти после окончания первой анимации.

Если я не использую queue() или обратный вызов после первой анимации, они запускаются одновременно.

Если я использую 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 ]

5 голосов
/ 11 ноября 2009

Ваш хак выглядит примерно так? 

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

Здесь - рабочий код.

0 голосов
/ 11 ноября 2009

Вы должны иметь возможность запускать вторую анимацию, передавая обратный вызов первой анимации, чтобы получить уведомление о ее завершении.

...