如何HTML，CSS和JS轉換成一個JavaScript的（動畫）

Question

我做了這個劇本，但現在我想把它當作一個JavaScript的：http://jsfiddle.net/SamuraiFox/p9sDB/

或者至少是「翻譯」這一部分轉換爲JavaScript：

-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 

Answer 1

你可以使用jQuery的animate

$("#circle").animate({ 
    width: 0, 
    height: 0, 
    }, 1000); 

你也可以添加一個「寬鬆」的屬性，如果你需要用它玩。你必須安裝一個jQuery緩動插件，像這樣：http://gsgd.co.uk/sandbox/jquery/easing/

默認情況下，jQuery的緩動方法是swing。 linear也在jQuery中實現。

的jsfiddle：http://jsfiddle.net/p9sDB/4/

Answer 2

你可以每加入JavaScript的CSS

http://jsfiddle.net/pixelass/p9sDB/5/

function resize() { 
    $("#circle").css({ 
     "transition": "all 1s ease", 
     "width": "0px", 
     "height": "0px" 
    }); 
} 

建議使用CSS的動畫，而不是jQuery的animate