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

мои навыки jQuery довольно хороши, но это заставляет меня ума!

Это довольно простой аккордан, который я закодировал с нуля. С помощью jQuery 1.3.2, поэтому не должно быть никаких прыгающих ошибок, но в принципе, если вы посмотрите на пример:

http://www.mizudesign.com/jquery/accordian/basic.html

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

Я не могу понять, где я ошибаюсь - очевидно, что в CSS где-то, но я пробовал всех обычных подозреваемых, таких как display: block

Любые идеи были бы с благодарностью приняты!

С уважением, Крис

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

Ответы

Ответ 1

Для контента вам нужна ширина или высота, чтобы он плавно анимировал.

Ответ 2

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

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

redsquare: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

Проблема связана с тем, что IE (режим quirks) пытается отобразить "height: 0px".

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

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

Ответ 10

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

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