Обнаружение анимации завершено из родительского iframe

Question

У меня есть следующий код:

ОСНОВНОЙ ДОКУМЕНТ HTML

  $(function(){              
    $("#i").load(function(){
      var $iframeContents = $(this).contents(),
          $a = $iframeContents.find('#click-me'),         
          $box = $iframeContents.find('#box');         

      $a.click(function(){
        $("#i").animate({height: $box.height(), width: $box.width()})
      });                 
    });       
  });          
<iframe id="i" src='in-frame.html'></iframe>      

ДОКУМЕНТ КАМЕРЫ

  <h1><a id="click-me" href="#">Click Me</a></h1>
  <div id="box">   
  </div>                                                                                                                  
  <script>
  $(function(){                         
    $("#click-me").click(function(){
       $("#box").animate({height: "400px", width: "400px"});
    });
  })
  </script>     

В документе in-frame.html есть js, который анимирует div #box.Я хотел бы подождать, пока анимация не будет завершена, прежде чем вызвать $("#i").animate({height: $box.height(), width: $box.width()})

Я чувствую, что должен как-то прослушивать событие, но я не совсем уверен, как это сделать.

Примечание: Оба находятся в одном домене.

Answer 1

.animate (properties [, duration] [, easing] [, complete] )

properties: карта свойств CSS, к которой будет двигаться анимация.

duration: строка или число, определяющее продолжительность анимации.

easing: строка, указывающая, какую функцию замедления использовать для перехода.

complete:Функция для вызова после завершения анимации.

Источник: http://api.jquery.com/animate/

Использование функции обратного вызова.