Базовый jQuery slideUp и slideDown сводил меня с ума!

Вам нужна ширина или высота содержимого, чтобы оно плавно анимировалось.

Я должен признать, что нашел свое собственное динамическое решение.

http://www.mizudesign.com/jquery/accordian/basic.html должно быть исправлено.

На самом деле это очень просто - просто добавьте высоту с помощью .css, прежде чем скрывать div. Работает на здоровье :)

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();

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

Также «имейте в виду», что таблицы ведут себя некорректно с помощью slideDown slideUp и скорее используют fadeIn fadeOut

Получите высоту, как только div завершит свою анимацию из обратного вызова. Возможно, вы получаете высоту во время анимации div и получаете переходное значение.

Если ваша анимация дергается, попробуйте использовать обратные вызовы. Не открывайте div и не скрывайте div одновременно. Вместо этого скройте свой первый div и в обратном вызове покажите следующий div.

$(".someDiv").slideUp("normal", function(){
  /* This animation won't start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

Обновлено (из комментариев):

красный квадрат: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

У меня также была раздражающая проблема с переходом slideUp(), которая возникала в Safari, но не в Chrome или IE. Оказалось, что тег div, который я скрывал/показывал, находился прямо под другим тегом div, который содержал float:left div. Во время скольжения плавающие элементы div на мгновение перерисовывались, вызывая скачок.

Исправление заключалось в простом добавлении clear:both к стилю скрытия/отображения div.

Моя проблема в том, что поскольку у меня отзывчивый дизайн, я не знаю, какой будет ширина или высота моего элемента. После прочтения этого сообщения в блоге http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm Я понял, что jQuery изменение положения моего элемента на фиксированное и изменение макета элемента. Я добавил следующее в свой CSS для элемента и не заметил каких-либо побочных эффектов в IE7+, firefox, chrome и сафари.

display: none;  
overflow: hidden;
position: relative !important;   

Замена значений margin-top и margin-bottom значениями padding-top и padding-bottom помогла мне. После этого не забудьте установить значение поля равным 0.

Это сработало для меня:

$(this).pathtoslidingelementhere.width($(this).parent().width());

Проблема связана с тем, что IE (причудливый режим) пытается отобразить «высота: 0 пикселей».

Исправление: анимировать высоту до 1 (не 0), затем скрыть и сбросить высоту:

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

Для меня проблема заключалась в том, что поля (или отступы) в div должны отображаться/скрываться со слайдом, но мне нужно было указать поля (или отступы) для этого div. Я решил с помощью этого трюка:

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }