Создание перехода ширины в jQuery

Question

У меня есть изображение, и когда оно наведено, я бы хотел, чтобы его ширина увеличилась с помощью jQuery.Я знаю, как это сделать, но теперь я хотел бы сделать этот эффект медленнее, возможно, длиной 500 миллисекунд, а не мгновенным.

Я знаю, что это должно быть довольно легко, я просто не знаю синтаксис,Как этого достичь?

Это мой текущий скрипт:

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

РЕДАКТИРОВАТЬ: Я столкнулся с другой проблемой.Я создал два сценария, один для увеличения изображения и один для его уменьшения.Тем не менее, сценарий выглядит довольно глючным и не гладким, и переключается между большим и малым без причины.Я изменяю размеры, используя onmouseover и onmouseout.

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

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

Answer 1

Это должно быть то, что вы ищете, оно будет анимировать ширину примера до 250px со скоростью 500 миллисекунд

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

Надеюсь, что поможет

РЕДАКТИРОВАТЬ: Относительно вашего обновленного вопроса: http://jsfiddle.net/Hfs7L/2/

Answer 2

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

с использованием jQuery .animate() и .stop()

Answer 3

Относительно вашей обновленной проблемы: попробуйте вытащить анимацию из очереди анимации, чтобы она не заканчивалась, прежде чем она сможет запустить новую анимацию:

// Больше

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

// Меньше

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

Answer 4

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