Making a width transition in jQuery

I have an image, and when it is hovered on, I 开发者_Python百科would like its width to increase using jQuery. I know how to do that, but now I would like to make this a slower effect, maybe 500 milliseconds long, not instant.

I know that it should be pretty easy, I just don't know the syntax. How can this be achieved?

This is my current script:

$("#example").width("250");

EDIT: I came across another problem. I created two scripts, one for making the image larger and one for making it smaller. However, the script seems pretty buggy and unsmooth, and switches back and forth between big and small without reason. I am resizing it using onmouseover and onmouseout.

//Bigger
$("#example").animate({width: 250}, 200 );

//Smaller
$("#example").animate({width: 200}, 200 );

This should be what your looking for, it will animate the width of the example div out to 250px at a speed of 500 miliseconds

$("#example").animate({width: 250}, 500 );

Hope that helps

EDIT: With regards to your updated question: http://jsfiddle.net/Hfs7L/2/

$("#example").stop().animate({width:250}, 500); // bigger
$("#example").stop().animate({width:200}, 500); // smaller

using jQuery .animate() and .stop()

Regarding your updated problem: Try and get the animations out of the animation queue, so it doesn't have to finish before it can start a new animation:

//Bigger

$("#example").stop(true, true).animate({width: 250}, 200 );

//Smaller

$("#example").stop(true, true).animate({width: 200}, 200 );

$("#example").animate({width:'250'}, 500);