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


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

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

Answer 1

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

properties: A map of CSS properties that the animation will move toward.

duration: A string or number determining how long the animation will run.

easing: A string indicating which easing function to use for the transition.

complete: A function to call once the animation is complete.

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

使用回调函数。