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：动画将移动的CSS属性的地图   朝向。

持续时间：确定动画将持续多长时间的字符串或数字   运行

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

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

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

使用回调函数。

从父iframe检测动画完成

1 个答案: