Changing the size of an element in jQuery while maintaining relative size changes in CSS

I have an element which is a circle that grows when hovered over and shrinks slightly when clicked on. This is accomplished using the :hover and :active CSS pseudo-classes:

#circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transition-duration: 0.2s;
}
#circle:hover {
    width: 120px;
    height: 120px;
}
#circle:active {
    width: 110px;
    height: 110px;
}

If I use the following jQuery to increase the size of the circle, then the circle remains that size even when hovered over or clicked on (understandably).

var circle = $("#circle");
circle.width(200);
circle.height(200);

JSFiddle available here.

How can I increase the size of the circle in jQuery but still have it grow when hovered over and shrink slightly when clicked on? E.g. when I set the size to 200px, it will grow to 240px when hovered over and 220px when clicked on.

Note: The 100px and 200px etc. values are just examples. I am looking for a solution that will allow me to change the size of the circle to any size and still maintain the growing/shrinking on hover/click.