Проблема с пользовательским интерфейсом jQuery Shake

#jquery #jquery-ui

#jquery #jquery-пользовательский интерфейс

Вопрос:

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

http://jsfiddle.net/ShhER/6/

Я хочу сказать, что это ошибка, но, вероятно, это не так … есть идеи?

Комментарии:

1. это довольно хорошо работает на скрипке. вы не можете изменить расстояние встряхивания по оси x ? я не использовал этот эффект и не могу вспомнить документацию

2. нет, он принимает параметр, но независимо от этого он всегда уходит далеко влево, а затем изменяет расстояние до этого параметра. вот еще один пример: jsfiddle.net/ShhER/6 . Просто нажмите обновить, и вы заметите проблему со встряхиванием.

Ответ №1:

Анимируемый элемент должен быть на уровне блока или иметь display: block явное указание на него.

Я установил display: block , а затем соответствующим образом скорректировал CSS метки. Это сработало нормально.

jsFiddle.

Комментарии:

1. Это отлично сработало бы, но теперь я не могу расположить два элемента рядом друг с другом (что я делаю в своем основном коде). jsfiddle.net/ShhER/6 (Я удалил здесь блок display:)

Ответ №2:

Я обнаружил, что jQuery добавляет оболочку к элементу с помощью class ui-effects-wrapper , поэтому добавление этого css решило мою проблему.

 .ui-effects-wrapper {
        display:inline;
    }
  

Ответ №3:

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

Я исправил это, добавив в оболочку значение with, равное 100%. В моем случае у меня есть что-то вроде этого:

 <div class="errorBox nameBox" style="position: absolute; top: 352px; left: 948.5px; display: block; width: 100%">
   <div class="errorArrow"></div>
   <div class="errorDescription">Type your name</div>
</div>
  

С уважением.!!