jQuery slideToggle прыгает вокруг

Question

Я использую функцию jQuery slideToggle на сайте, чтобы раскрыть «дополнительную информацию» о чем-либо. Когда я запускаю слайд, контент постепенно раскрывается, но располагается примерно на 100 пикселей вправо до конца анимации, когда он внезапно переходит в правильное положение. Иначе говоря, содержимое скачет прямо на ту же величину непосредственно перед тем, как оно начнет свою анимацию «скрытия», а затем постепенно будет скрыто.

Происходит в IE7 / 8, FF, Chrome.

Есть идеи, как бы это исправить?

Заранее спасибо.

Answer 1

Я столкнулся с той же ошибкой, решил ее, поместив элемент с position: relative; width: 709px; Фиксированная ширина сделала свое дело.

Answer 2

Добавление свойств перехода / преобразования CSS3 всегда решало любые проблемы с прыжками с помощью slideToggle ... Пример:

-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;

-webkit-transition: transform 0.26s ease;
-moz-transition: transform 0.26s ease;
-ms-transition: transform 0.26s ease;
-o-transition: transform 0.26s ease;
transition: transform 0.26s ease;
transition: -webkit-transform 0.26s ease;

Answer 3

У меня была эта проблема при использовании плавающих элементов внутри переключаемого элемента. Установка ширины 100% против переключаемого элемента исправила это для меня. Если вы хотите использовать отступы, вы также можете установить для размера рамки значение border-box.

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

Answer 4

У меня была та же проблема, но переполнение: скрытое и положение: относительное не оказало влияния Я поместил margin-bottom: -10px на элемент, который включался, и это решило проблему.

Answer 5

была такая же проблема, обнаружил проблему, может быть, кто-то еще был.

если у вас min-height -> чем у вас проблема с slideToggle

Answer 6

Единственное, что мне помогло: дать контенту прокрутить по ширине.

Answer 7

Случайно я думаю, что самое простое в использовании решение - это добавить пользовательскую функцию в jQuery с анимированным отступом / margin-top / bottom.

//this function is to avoid slideToggle jQuery jump bug.
$.fn.slideShow = function(time,easing) { return $(this).animate({height:'show','margin-top':'show','margin-bottom':'show','padding-top':'show','padding-bottom':'show',opacity:1},time,easing); }
$.fn.slideHide = function(time,easing) {return $(this).animate({height:'hide','margin-top':'hide','margin-bottom':'hide','padding-top':'hide','padding-bottom':'hide',opacity:0},time,easing);  }

И пример использования:

$(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');

Мой пример анимированной непрозрачности переключает ту, вы можете изменить его, как вам нужно.

Answer 8

Это старая проблема, но подобные проблемы все еще существуют, но ниже рабочего решения с парой дополнительных требований.

http://jsfiddle.net/bfnGu/7/