基本動畫效果 - 我應該使用jQuery還是HTML5 Canvas？

我目前正在爲我的網頁製作非常基本的動畫。基本動畫效果 - 我應該使用jQuery還是HTML5 Canvas？

我想從底部的一個元件（.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 -->

來源

2013-04-28 michaelmcgurk

您是否閱讀過[jQuery'animate（）']（http://api.jquery.com/animate/）？它應該很容易。 – Uby 2013-04-28 09:17:04

考慮到你的基本動畫的範圍，jQuery將會很好，並且它比使用canvas更容易使用（在我看來）。還允許更好的交叉兼容性。 – Turnerj 2013-04-28 09:17:42

你最好用jQuery去，jquery會處理瀏覽器的兼容性。 – BK004 2013-04-28 09:18:21

你想要這樣的事情嗎？ 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>

來源

2013-04-28 09:26:50

哇。那絕對是完美的！對於延遲迴復，我誠摯的歉意，我沒有看到「答案」鏈接:-) – michaelmcgurk 2013-04-28 09:38:52

@michaelmcgurk不客氣。 :) – 2013-04-28 10:13:45

基本動畫效果 - 我應該使用jQuery還是HTML5 Canvas？

回答

相關問題