How do I change the size of an individual image with jquery on rollover?

Question

I have an effect at http://www.lightsandfire.com that is done with css transitions but it doesnt work in IE, how do I create the same effect in jquery? I would like to be able to rollover an image and have the image grow in size above the flow of the document. I would like to change the size of an image proportionally when I roll over it with a mouse. If the image increased in size 100% that would be what I am looking for.

Any help would be appreciated.

Answer 1

You need to use animate, and animate the width and height. Animating of height and width is cross-browsers compatible.

Answer 2

To animate an object on hover:

$('.item').hover(function() {//Hovering
    $(this).animate({
        width: '400px',
        height: '400px',
        marginLeft: '-200px',
        marginTop: '-200px'
    }, 400);//Speed of animation in ms
}, function() { //Not hovering
    $(this).animate({
        width: '200px',
        height: '200px',
        marginLeft: '-100px',
        marginTop: '-100px'
    }, 400);
});

To make it on click, just change the hover to mouseDown.