Creating a width transition in jQuery

Question

I have an image, and when it freezes, I would like its width to increase with jQuery. I know how to do this, but now I would like to do it slower, maybe 500 milliseconds, and not instantly.

I know this 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 ran into another problem. I created two scenarios, one to make the image larger and one to reduce its size. However, the script seems pretty buggy and non-smooth, and switches back and forth between large and small for no reason. I resize it using onmouseover and onmouseout.

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

Answer 1

It should be what you are looking for, it will animate the width of the example div to 250px at a speed of 500 milliseconds

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

Hope that helps

EDIT: Regarding your updated question: http://jsfiddle.net/Hfs7L/2/

Answer 2

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

using jQuery .animate() and .stop()

Answer 3

Regarding your updated issue: Try and get the animation out of the animation queue, so it should not end 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 ); 

Answer 4

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