Не можете выбрать поле ввода во время анимации jQuery?

Question

Этот вопрос является косвенным результатом этого вопроса о сценарии анимации для формы.

Это простой скрипт jQuery, который анимирует поле ввода на другую ширину при фокусировке и сбрасывает его до первоначальной ширины при расфокусировке следующим образом:

$(document).ready(function() {
$('input').focus(function() {
    $(this).animate({
        width: "250px"
    }, 500);
});
$('input').focusout(function() {
    $(this).animate({
        width: "200px"
    }, 500);
});
});

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

Есть ли способ обойти это?Я не смог найти ни одной вещи!

Answer 1

Можно просто использовать CSS для такого простого преобразования ...

jsfiddle здесь

input {
width: 200px; 
transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
-o-transition: .5s;}

input:focus {
width: 250px;
transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
-o-transition: .5s; }