JQuery IE анимация отрывистых слайдов - PullRequest
5 голосов
/ 26 мая 2009

У меня есть следующий код для анимации отображения / скрытия div.

$(".headerClosed, .headerOpen").live("click", function(){
  $(this).next().slideToggle("slow");
}

Показывает и скрывает div со следующей разметкой:

<div class="details">
  <p>Date</p>
  <p>Text</p>
</div>

Проблема в IE (сюрприз, сюрприз!), Когда div скользит вниз, анимация плавная до конца, когда она дергается. Я знаю, что это связано с настройками отступов / полей в div.

Если я использую

вместо

, то анимация плавная, но как только я добавляю какие-либо отступы или поля к

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

Ответы [ 3 ]

4 голосов
/ 23 декабря 2009

Ваша прибыль, вероятно, падает. Когда вы применяете float, overflow: auto или overflow: hidden к скользящему элементу, это больше не должно происходить.

jQuery устанавливает overflow: hidden во время анимации, поэтому поля не сжимаются. Когда анимация завершена, это свойство удаляется. Поля <p> снова рушатся, поэтому в конце вы получите небольшой рывок.

2 голосов
/ 26 мая 2009

Оберните div внутри другого div. Добавьте отступ / margin во внутренний div и вызовите анимацию во внешнем div.

<div class="details">
   <div class="hasMargins">
    <p>Date</p>
     <p>Text</p>
   </div>
</div>
0 голосов
/ 26 мая 2009

У меня была та же проблема, и я сделал анимацию полей и отступов во время слайда:

$(this).next().slideToggle("slow");
$(this).next().animate({ margin: "XXpx", padding: "XXpx" }, "slow");

Задание медленного режима для обоих обеспечивает одновременное выполнение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...