How to translate html, css and js into one javascript (animation)

Question

I made this script but now I want it as one javascript: http://jsfiddle.net/SamuraiFox/p9sDB/

Or at least "translate" this part into javascript:

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

Answer 1

You could use jQuery's animate

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

You could also add an 'easing' attribute if you need to play with it. You'd have to install a jQuery easing plugin though, like this one : http://gsgd.co.uk/sandbox/jquery/easing/

By default, jQuery's easing method is swing. linear is also implemented in jQuery.

JSFiddle : http://jsfiddle.net/p9sDB/4/

Answer 2

you can just add the css per javascript

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

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

it is recommended to use css-animations instead of jQuery animate