从父 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>      

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 文档中有动画 #box div 的 js。我想等动画完成后再调用$("#i").animate({height: $box.height(), width: $box.width()})

我觉得我应该以某种方式收听该事件，但我不确定该怎么做。

注意：它们都在同一个域中。

Answer 1

.animate( 属性 [, 持续时间] [, 缓动] [, 完成] )

properties：动画将移动的 CSS 属性的映射 往。

duration：一个字符串或数字，确定动画将持续多长时间 运行。

easing：一个字符串，指示要使用哪个缓动函数 过渡。

complete：动画完成后调用的函数。

来源：http://api.jquery.com/animate/

使用回调函数。