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

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

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

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

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

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

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

твой, Крис!--1-->

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

12
animation effects jquery

10 ответов

вам нужна ширина или высота на содержимом для его анимации плавно.

17

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

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

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

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

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

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

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

3

получить высоту, как только 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/

1

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

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

1

моя проблема в том, что у меня есть адаптивный дизайн Я не знаю, какова будет ширина или высота моего элемента. После прочтения этого сообщения в блоге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;
1

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

1

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

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

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

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

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

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

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