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

Question

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

1. 我想将一个元素（.item1）从底部移动到容器中。

2. 完成此移动后，我想将第二个项目（.item2）从左侧移动到容器的中间。

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

演示： http: //jsfiddle.net/9rE6Z/3/e ​​mbedded/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 -->

Answer 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>