jQuery - переключить поля и высоту в ноль, а затем снова?

Question

У меня есть элемент, его CSS 'display' установлен на 'none', его высота установлена ​​на 20px, а margin-top установлен на ноль пикселей.

Когда пользователь нажимает кнопку, я хочу, чтобы мои высота элементов и поля были установлены на 0 пикселей. Затем я хочу установить для «display» значение «block» и анимировать его высоту и поля в соответствии со значениями, определенными в CSS - 20px, - чтобы скользить и показывать себя.

Когда пользователь снова нажимает кнопку, я хочу анимировать высоту элементов и отступ до нуля.

Функции jQuerys toggle / slideToggle, похоже, не учитывают маржу, поэтому я получаю скачкообразную анимацию, поэтому я хочу сделать свой собственный сценарий анимации, чтобы иметь надлежащий контроль над анимацией.

Какой лучший способ сделать это? Когда я пытаюсь, я просто создаю беспорядок. Возможно, есть несколько руководств по лучшей практике? Я чувствую себя в значительной степени самостоятельно, за исключением простых сценариев, таких как "$ ('. my-thing'). click (). animate ({'height', '5px'});" и всякий раз, когда я пытаюсь сделать что-то более сложное, это превращается в огромный беспорядок.

Answer 1

Попробуйте использовать отступы, а не поля. Таким образом высота / ширина во время анимации будет рассчитана правильно.

Answer 2

вы уверены, что это не проблема CSS, а не проблема jQuery? я имею в виду, попробуйте сначала открыть окно без эффекта jQuery, чтобы убедиться, что CSS в порядке, ТО, попробуйте jQuery Я спрашиваю об этом только потому, что все время использую slideToggle, и он учитывает мои поля.