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

StackOverflow https://stackoverflow.com/questions/1092245

  •  11-09-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

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

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

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

Это было полезно?

Решение

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

Другие советы

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

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 дивы.Во время скольжения вверх плавающие divs будут на мгновение повторно визуализированы, вызывая скачок.

Исправление заключалось в простом добавлении 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 и safari.

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

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

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

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

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

Исправление:Анимируйте высоту до 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;
  }
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top