jquery animation help

I have two circles, one is small (thumb) another one is big (info), and when the user hover over the small (thumb), then the small icon need to resize in to big one. I also need to show the new information开发者_如何学Go in the big. I think I have to do this by width and height animation, because small is 100px X 100px, and big is 200 X 200 size.

Please advice on the best way to do this. I would like to avoid using plug-ins.

using jquery 1.4.2 or up, you can achieve this by using:

$(".smallCircle").hover(
function () {
    $(this).animate({
        width: '200px',
        height: '200px'
    }, 200, function() {
        // Animation complete.
        //do whatever
  });
}, 
function () {
    $(this).animate({
    width: '100px',
    height: '100px'
  }, 200, function() {
    // Animation complete.
    //do whatever
  });   
});

put the class "smallCircle" in the small circle.

P.S. in each state of the hover, you can control what happens after the animation is done (the place where I put "//do whatever"), that's the place where you could insert the content of the big cicrle.