2014-02-06 2 views
3

я Ваты запустить JQuery-UI эффекта под названием «трясти» на вход тег:JQuery-UI эффект изменяет <input> размера при запуске эффекта

$("#myInput").effect("shake"); 

Я дал входной тег нового размера в прилагаемом CSS файл:

height: 25px; 
width: 250px; 

эффект работает нормально, но в действительности, входной тег имеет размер по умолчанию, пока эффект не закончится. Затем он снова становится большим.

Где ошибка? Это ошибка в jquery-ui?

enter image description here

изображения во время эффекта.

+2

Я думаю, что это некоторая проблема с тем, как jquery-ui применяет эффекты, а именно путем обертывания цели во временном контейнере div. Раньше у меня были такие же проблемы, и я не нашел решения. – ElendilTheTall

+0

Можете ли вы воспроизвести это в jsfiddle ... Это похоже на работу для меня http://jsfiddle.net/qhK96/ в Chrome. – DaniP

+0

Очень странно, но твоя скрипка работает, я не вижу реальной разницы в моем коде ... но я храню вход в var. Но я тестировал это в скрипке, и это сработало. –

ответ

0

Скорее всего, это связано с тем, что стиль CSS имеет приоритет во время эффекта. См. http://jsfiddle.net/qhK96/1/, где фон становится красным во время анимации встряхивания.

div > input /* while not in animation */ 

div > div > input /* while in animation due to wrapping from jQuery, like ElendilTheTall said */ 

Решение легко: исправить ваш css. Звучит немного умнее, извините, но нам нужно больше информации, чтобы указать на вашу проблему. Сначала попробуйте добавить !important в высоту определения стиля yout или попробуйте установить высоту с высотой строки.

+0

Нет, это не css. Если я даже не использую css, проблема остается. Я не могу дать больше информации, потому что код скрипки (выше) работает на сайте скрипта, но нет, когда я копирую его в локальном файле и вызываю его в браузере. –

0

У меня была такая же проблема и нашли решение. И да, я согласен с ElendilTheTall, что JQuery UI завершает цель и изменяет размеры до тех пор, пока эффект не выполняется. Итак, решение прост. Просто исправьте высоту и ширину элемента HTML, добавив «! Important» в CSS. Именно это. Пользовательский интерфейс JQuery не сможет изменить размеры.