Question

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

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

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

DEMO： 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 -->

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>

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

1 个答案: