JQuery slideToggle перескакивает
Я использую функцию jQuery slideToggle на сайте, чтобы раскрыть «дополнительную информацию» о чем-то. Когда я запускаю слайд, содержимое постепенно раскрывается, но оно располагается справа примерно на 100 пикселей до конца анимации, когда он внезапно переходит в правильное положение. Если пойти другим путем, контент прыгает прямо на ту же величину перед тем, как начать анимацию «скрытия», а затем постепенно скрывается.
Встречается в IE7 / 8, FF, Chrome.
Есть идеи, как бы это исправить?
Заранее спасибо.
jQuery версии 1.2.6. Сайт - ASP.NET MVC, но это не имеет значения.
Ответы 18
Это просто снимок в темноте, но если функция управляет свойством css высоты вашего элемента (ов), в соответствии с этот сайт вы должны разделить отступы и display: none в вашем css, чтобы он не прыгнул
Попробуйте поиграть с тем, как элемент позиционируется / отображается / перемещается. У меня были похожие проблемы, которые решались игрой с этими настройками.
Я нашел обходной путь, но все еще не уверен в деталях. Казалось, что когда jQuery добавил стиль «overflow: hidden», эффект от соседнего плавающего элемента изменился. Обходной путь заключался в том, чтобы поместить постоянное «overflow: hidden» в div slideToggle'd, а также отрицательное поле margin-left, чтобы уравновесить эффект.
Я удивлен, что изменение значения переполнения так влияет на макет, но вот оно ...
В дополнение к этому я также обнаружил, что любой переход CSS для элемента, который вы пытаетесь переключить, может повлиять на это. У меня был общий переход «все» для всего, как только я его удалил, проблема исчезла. Чего стоит остерегаться!
Содержит ли ваш документ какое-либо объявление DOCTYPE? Без этого некоторые браузеры отображают страницу в режиме "quirck", что не всегда приводит к ожидаемому результату.
см. здесь
Чтобы ваша страница отображалась должным образом, добавьте следующее объявление вверху страницы (то есть перед тегом html).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Doctype исправил это для меня в IE8, спасибо. Дневной лимит голосов достигнут. Извиняюсь.
Я столкнулся с той же ошибкой, решил ее, разместив элемент с помощью
position: relative; width: 709px;
Фиксированная ширина сделала свое дело.
У меня была точно такая же проблема, но только тогда, когда скрытым элементом был <div>. Я перепробовал все на этой странице, но единственное, что сработало, - это использование overflow:hidden;.
Но проблема с использованием overflow:hidden; заключается в том, что верхний и нижний интервалы, создаваемые элементом абзаца, были внезапно удалены, что сделало макет некрасивым.
Я изменил свой скрытый элемент с <div> на <p> и удалил overflow:hidden; ... он работал без нарушения макета, и проблема с прыжком не вернулась.
Обновлено:
На новом сайте я решил использовать скрытый <div> и обнаружил кое-что об этой проблеме ...
1) Когда div содержит p или ul или аналогичный, происходит скачок.
2) Если div содержит только текст, ссылки и / или изображения a, анимации перехода нет.
3) Удаление всех полей и отступов из элементов в скрытом div устраняет проблему. Можно добавить другие вещи, такие как разрывы строк, чтобы компенсировать отсутствие отступов и полей ... не идеально, но анимация снова плавная.
В частности, по крайней мере, в моем случае проблема возникает из-за верхнего поля. На нижнее поле это не влияет.
Я сделал отчет об ошибке, включая тестовый пример, на bugs.jquery.com/ticket/10662
@Stijn, я никогда не думал об этом ... но мои <p> и <ul> уже имеют нулевой верхний предел. Интересно, что произойдет, если div содержит несколько абзацев, поэтому в середине div есть нижние поля. Спасибо за сообщение.
установка высоты / ширины компонента, который вы хотите сдвинуть, исправляет ошибку, которая вызывает "нервозность" с использованием строки вроде (Справка):
$('#slider').css('height', $('#slider').height() + 'px');
У меня был случай таблицы в div, который вызывал нервозность. Это решение работало в сочетании с установкой внутренней высоты стола на высоту: 100%;
Это старый, но похожие проблемы все еще существуют, ниже рабочего решения с еще парой требований.
Решено добавлением к переключенному div:
overflow: hidden; position: relative;
Большое спасибо, он решил это за меня! Но мне любопытно, почему это сработало?
У меня была такая же проблема с .slideToggle, и Бен Адлер прав. Поместите все, что вы хотите переключить, в div и установите стиль для div на то, что содержит overflow:hidden и position: relative. После этого он будет работать нормально.
Случайно я думаю, что самое простое в использовании решение - добавить пользовательскую функцию в jQuery с анимированными отступами / полями сверху / снизу.
//this function is to avoid slideToggle jQuery jump bug.
$.fn.slideShow = function(time,easing) { return $(this).animate({height:'show','margin-top':'show','margin-bottom':'show','padding-top':'show','padding-bottom':'show',opacity:1},time,easing); }
$.fn.slideHide = function(time,easing) {return $(this).animate({height:'hide','margin-top':'hide','margin-bottom':'hide','padding-top':'hide','padding-bottom':'hide',opacity:0},time,easing); }
И пример использования:
$(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');
Мой пример анимированного переключения непрозрачности, вы можете изменить его по своему усмотрению.
вы можете использовать такую структуру:
<div class = "details">
<div class = "hidden"> [your toggled info] </div>
</div>
и в вашем css
.details{
position:relative;
}
.hidden{
display:none;
}
я думаю, что это все.
ваш вызов jquery должен быть:
$('.hidden').slideToggle("slow");
Единственное, что мне помогло: дать контенту прокрутку по ширине.
это опечатка? Что вы имеете в виду, говоря "Дать содержимому прокрутить ширину"
была такая же проблема, обнаружил проблему, может быть, у кого-то она была.
если у вас есть min-height ->, чем у вас проблема с slideToggle
Просто чтобы поделиться решением, которое сработало для меня.
Я использую адаптивный макет для сайта, над которым я работаю, и, по сути, использую переключатель слайдов в одном из моих столбцов в моем макете, единственное решение, которое сработало выше, - это установка фиксированной ширины для моего контента, однако, поскольку ширина столбцов является динамической, это не решение для меня.
Обертывание контента, который я хотел переключить в дополнительном <div>, а затем использование переключателя слайдов на новом div, похоже, помогло. Попробуйте добавить position:relative к исходному элементу, который вы пытались переключить.
Да, это добавляет ужасную ненужную разметку, но это единственный способ заставить ее работать.
У меня была та же проблема, но overflow: hidden и position: relative не повлияли. Я установил margin-bottom: -10px на переключаемый элемент, и проблема была решена.
У меня возникла эта проблема при использовании плавающих элементов внутри переключаемого элемента. Установка ширины 100% для переключаемого элемента исправила это для меня. Если вы хотите использовать отступы, вы также можете установить для размера поля значение border-box.
Относительное позиционирование не требуется, но вы можете использовать overflow: hidden для очистки плавающих элементов.
Добавление свойств перехода / преобразования CSS3 всегда решало для меня любые проблемы с прыжками с помощью slideToggle ... Пример:
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-webkit-transition: transform 0.26s ease;
-moz-transition: transform 0.26s ease;
-ms-transition: transform 0.26s ease;
-o-transition: transform 0.26s ease;
transition: transform 0.26s ease;
transition: -webkit-transform 0.26s ease;
Какую версию ядра jQuery вы используете?