javascript - Jquery - 动画高度变化

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 函数将在内部调用 requestAnimationFrame 函数，以便随时间更改该值。 https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

给出的第二个参数(5000)是动画的时间量(以毫秒为单位)。所以 5000 将持续 5 秒。该参数是可选的。

您可以通过给定缓动字符串来告诉 animate 函数以不同的方式设置动画。并非所有缓动都在 jQuery 中受支持，但您可以尝试此处列出的一些缓动:http://api.jqueryui.com/easings/

最后，示例中的空函数是动画结束时将被调用的函数。该参数也是可选的。