如何使用 Javascript 将 <div> 的动画从 0% 增加到 70%？

【问题标题】：How to animate a <div> from 0 to 70% incrementally with Javascript?如何使用 Javascript 将 <div> 的动画从 0% 增加到 70%？
【发布时间】：2016-06-28 05:59:08
【问题描述】：

我想要制作一个定位的 <div> 元素，它以 2px 的增量从 0 到 70% 进行动画处理。

我想为特定的计算机提示式负载效果执行此操作。

这可能是一个东西，它是否至少与 Firefox 和 Chrome 兼容？

【问题讨论】：

不移动 div，而是逐步增加 height 属性。
我会试试的，谢谢。在我意识到应该有更好的方法之前，我一直在玩画布。

标签： javascript html animation increment

【解决方案1】：

可以使用 JavaScript 制作动画。一个特别容易做到这一点的库是使用animate() 函数的jQuery。由于您还没有发布示例代码，我只能发布一个如何使用animate() 函数的示例：

HTML：

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;">

JavaScript：

// This will handle your onLoad requirement
$( document ).ready(function() {
    $( "#clickme" ).click(function() {
      $( "#book" ).animate({
        opacity: 0.25,
        left: "+=50",
        height: "toggle"
      }, 5000, function() {
        // Animation complete.
      });
    });
});

【讨论】：