Question

我有脚本根据内容更改iframe的高度。脚本本身很好用，我只是想知道是否有一种方法可以设置高度变化的动画，这样当iframe从200px变为1000px时它就不那么笨重了？这是我的代码到目前为止，它工作正常，我只需要添加动画。谢谢你的帮助。

window.setInterval(function(){
    $("iframe.flexht").each(function() {
        $(this).height( $(this).contents().find("html").height() );
    });
}, 500);

Answer 1

此示例取自http://api.jquery.com/animate/

$( "#book" ).animate({
  opacity: 0.25,
  left: "+=50",
  height: "toggle"
}, 5000, function() {
  // Animation complete.
});

基本上不是直接设置高度，而是传递animate函数应该是的值。然后，animate函数将在内部调用requestAnimationFrame函数，以便随时间更改值。 https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

给定的第二个参数（5000）是以毫秒为单位的动画时间。所以5000将持续5秒。此参数是可选的。

您可以通过为animate函数提供缓动字符串来告诉它。并非所有的缓动都支持jQuery，但你可以尝试一下这里列出的一些：http://api.jqueryui.com/easings/

最后，示例中的空函数是一个在动画结束时调用的函数。此参数也是可选的。

Answer 2

在我看来，“setInterval”它有点重，因为它总是在检查一些东西。

您是否尝试使用css？...如果您将过渡转换为.flexht类怎么办？

.flexht{
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  transition:all 1s;
}

抱歉，我不知道你的HTML是怎样的。但根据我的经验，这很有效。

Jquery - 动画高度变化

2 个答案: