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

Question

I'm currently working on a very basic animation for my web page at the moment.

1. I'd like to move one element ( .item1 ) from the bottom into a container.

2. Once this move is completed, I would like to move a 2nd item ( .item2 ) from the left into the middle of the container.

In time, these div blocks will be replaced with images.

DEMO: http://jsfiddle.net/9rE6Z/3/embedded/result/

What would be the best approach to doing this? Is it possible to use jQuery or should I be looking at HTML5 Canvas for this?

I'm very new to both areas and would really appreciate some pointers with this :-)

Many thanks :-D

My 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

Do you want something like this? 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);
});

I changed your HTML mark up a bit, too make it more logical.

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