Question

I have the following code, the circle doesn’t resize:

HTML

<div onMouseOver="mainOver();" onMouseOut="mainOut();" id="c"></div>

JavaScript / jQuery

function mainIn()
{
    $('#c').animate({
        border-radius: '100',
        webkit-border-radius: '100',
        moz-border-radius: '100',
        width: '200',
        height: '200',
        margin-left: '-100',
        margin-top: '-100'
    });
}

function mainOut()
{
    $('#c').animate({
        border-radius: '50',
        webkit-border-radius: '50',
        moz-border-radius: '50',
        width: '100',
        height: '100',
        margin-left: '-50',
        margin-top: '-50'
    });
}

Example

The problem

• The circle does nothing, even when hovered.

Answer 1

1. you didn’t include jQuery in your jsfiddle
2. Use border-radius:50% to make a square circle in anysize
3. Use jQuery to bind events, it’s easier!
4. Animation need timing and callback function

Look at fixed code:

$('#c').hover(function(){
    $(this).animate({
        width: 200,
        height:200,
        'margin-left':'-100px',
        'margin-top':'-100px'
    }, 500, function(){});
},function(){
    $(this).animate({
        width: 100,
        height:100,
        'margin-left':'-50px',
        'margin-top':'-50px'
    }, 500, function(){});
});

http://jsfiddle.net/mohsen/9j795/16/