基本动画效果 - 我应该使用 jQuery 还是 HTML5 Canvas？答案

【问题标题】：Basic Animation effect - should I use jQuery or HTML5 Canvas?基本动画效果 - 我应该使用 jQuery 还是 HTML5 Canvas？
【发布时间】：2013-04-28 23:38:54
【问题描述】：

我目前正在为我的网页制作一个非常基本的动画。

我想将一个元素 (.item1) 从底部移动到容器中。
此移动完成后，我想将第二个项目 (.item2) 从左侧移动到容器中间。

随着时间的推移，这些 div 块将被替换为图像。

演示： http://jsfiddle.net/9rE6Z/3/embedded/result/

这样做的最佳方法是什么？是否可以使用 jQuery 或者我应该为此查看 HTML5 Canvas？

我对这两个领域都很陌生，非常感谢您提供一些建议:-)

非常感谢：-D

我的 HTML：

<div style="width:100%;background:white">

    <div style="height:450px;width:980px;margin:0 auto;background:white;border:1px solid #000">

    </div>

</div>

<div class="item1" style="position:absolute;top:450px;left:50%;width:100px;height:100px;background:black"></div><!-- ease this up from bottom -->
<div class="item2" style="position:absolute;top:0;left:0;width:100px;height:100px;background:blue"></div><!-- ease this in from left -->

【问题讨论】：

你读过jQuery animate()吗？使用它应该很容易。
鉴于您的基本动画范围，jQuery 会很好，而且它比操作画布更容易使用（在我看来）。还允许更好的交叉兼容性。
你最好用jquery，jquery会处理浏览器的兼容性。
非常感谢您的 cmets。我对 jQuery 很陌生。你有我会如何去做这件事的例子吗？
只需将您的问题编辑为“使用 jQuery 制作动画”，然后询问您应该如何使用 jQuery 来完成此操作。另外，请在 CSS 窗口中提供一个新的样式，而不是内联。

标签： javascript jquery html canvas

【解决方案1】：

你想要这样的东西吗？ http://jsfiddle.net/9rE6Z/4/

var i1 = $("#item1"),
    i2 = $("#item2"),
    wrap = $("#wrap");

i1.animate({
    "bottom": 0,
    "opacity": 1
}, 700, function () {
    i2.animate({
        "left": 0,
        "opacity": 1
    }, 700);
});

我稍微修改了你的 HTML 标记，使其更符合逻辑。

<div id="wrap">
    <div id="inner-wrap">
        <div id="item1"></div>
        <div id="item2"></div>
    </div>
</div>

【讨论】：

哇。那绝对是完美的！对于延迟回复，我深表歉意，我没有看到“答案”链接:-)