jQuery slideToggle прыгает вокруг - PullRequest
Новая
       41

jQuery slideToggle прыгает вокруг

11 голосов
/ 03 октября 2008

Я использую функцию jQuery slideToggle на сайте, чтобы раскрыть «дополнительную информацию» о чем-либо. Когда я запускаю слайд, контент постепенно раскрывается, но располагается примерно на 100 пикселей вправо до конца анимации, когда он внезапно переходит в правильное положение. Иначе говоря, содержимое скачет прямо на ту же величину непосредственно перед тем, как оно начнет свою анимацию «скрытия», а затем постепенно будет скрыто.

Происходит в IE7 / 8, FF, Chrome.

Есть идеи, как бы это исправить?

Заранее спасибо.

Ответы [ 18 ]

34 голосов
/ 04 октября 2008

Я нашел обходной путь, но я все еще не уверен в деталях. Казалось, что когда jQuery добавил стиль «переполнение: скрытый», эффект того, что соседний плавающий элемент изменился. Обходной путь должен был поместить постоянное «переполнение: скрытый» в div slideToggle'd, а также отрицательное поле слева, чтобы уравновесить эффект.

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

7 голосов
/ 03 октября 2008

Это просто выстрел в темноте, но если функция манипулирует свойством высоты css ваших элементов, в соответствии с этим сайтом вы должны разделить отступ и отображение: ваш css, чтобы он не прыгнул

5 голосов
/ 15 сентября 2011

Решено добавлением к переключаемому div: 

overflow: hidden; position: relative;
3 голосов
/ 05 октября 2008

Содержит ли ваш документ декларацию DOCTYPE? Без него некоторые браузеры отображают страницу в режиме «quirck», который не всегда приводит к ожидаемому результату.

см. здесь

Чтобы убедиться, что ваша страница отображается правильно, добавьте следующее объявление в верхнюю часть страницы (то есть перед тегом html). 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3 голосов
/ 23 июня 2011

установка высоты / ширины компонента, который вы хотите сдвинуть, исправляет ошибку, которая вызывает «скачкообразность» с использованием такой строки ( reference ): 

$('#slider').css('height', $('#slider').height() + 'px');
2 голосов
/ 13 марта 2011

У меня была точно такая же проблема, но только когда скрытый элемент был <div>. Я попробовал все на этой странице, но единственное, что сработало, это использование overflow:hidden;.

Но проблема с использованием overflow:hidden; заключается в том, что верхний и нижний интервал, созданный элементом абзаца, был внезапно удален, тем самым делая уродливое расположение.

Я изменил свой скрытый элемент с <div> на <p> и удалил overflow:hidden; ... он работал, не портя макет, и проблема с прыжками не возвращалась.

EDIT:

На новом сайте я решил использовать скрытую <div> и обнаружил кое-что об этой проблеме ...

1) Когда div содержит p или ul или подобное, происходит прыжок.

2) Если div содержит только текст, a ссылки и / или изображения, анимация скачка отсутствует.

3) Удаление всех полей и отступов из элементов в скрытом div устраняет проблему. Другие вещи, такие как разрывы строк, могут быть добавлены, чтобы компенсировать отсутствие отступов и полей ... не идеально, но анимация снова плавная.

2 голосов
/ 21 июня 2012

У меня была такая же проблема с .slideToggle, и БенАдлер прав. Поместите в div все, что вы хотите переключить, и задайте стиль для div, который содержит overflow:hidden и position: relative. После этого все будет хорошо.

1 голос
/ 19 июля 2013

Просто чтобы поделиться решением, которое сработало для меня.

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

Завершение содержимого, которое я хотел переключить в дополнительные <div>, а затем с помощью ползункового переключателя на новом div, похоже, добилось цели. Попробуйте добавить position:relative к исходному элементу, который вы пытались сдвинуть с помощью ползунка.

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

1 голос
/ 14 декабря 2012

Вы можете использовать такую ​​структуру: 

<div class="details">
    <div class="hidden"> [your toggled info] </div>
</div>

и в вашем css 

.details{
    position:relative;
}
.hidden{
    display:none;
}

Я думаю, вот и все.

Ваш jquery-вызов должен быть: 

$('.hidden').slideToggle("slow");
1 голос
/ 03 октября 2008

Попробуйте поиграть с тем, как элемент позиционируется / отображается / перемещается. У меня были похожие проблемы, которые были решены путем игры с этими настройками.

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

Нет похожих вопросов

...