JQuery slideToggle перескакивает

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

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

Любые идеи о том, как я это исправим?

Спасибо заранее.

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

overflow: hidden; position: relative;

Ответ 4

Имеется ли в вашем документе какая-либо декларация DOCTYPE? Без него какой-то браузер отображает страницу в режиме "quirck", которая не всегда приводит к ожидаемому результату.

см. здесь

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ответ 5

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

$('#slider').css('height', $('#slider').height() + 'px');

Ответ 6

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

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

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

EDIT:

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

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

2) Когда div содержит только текст, a ссылки и/или изображения, нет анимации перехода.

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

Ответ 7

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

Ответ 8

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

Ответ 9

Я столкнулся с той же ошибкой, решил ее, установив элемент с помощью position: relative; width: 709px; Фиксированная ширина сделала трюк.

Ответ 10

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

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

и в вашем css

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

Я думаю, что это.

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

$('.hidden').slideToggle("slow");

Ответ 11

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

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

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

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

Ответ 12

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

http://jsfiddle.net/bfnGu/7/

Ответ 13

Случайно я считаю, что самым простым в использовании решением является добавление пользовательской функции в jQuery с анимированным дополнением /margin -top/bottom тоже.

//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');

Мой пример анимированной opacity toggle tu, вы можете изменить его по мере необходимости.

Ответ 14

Единственное, что помогло мне: дать контенту прокрутку ширины.

Ответ 15

имел ту же проблему, обнаружил, что проблема может быть у кого-то другого.

если у вас есть min-height → , чем у вас есть проблема с slideToggle

Ответ 16

У меня была та же проблема, но переполнение: скрытое и положение: относительный не имел никакого эффекта. Я поставил margin-bottom: -10px на элемент, который был включен, и он решил проблему.

Ответ 17

У меня была эта проблема при использовании плавающих элементов внутри элемента, который переключается. Установка ширины 100% против переключаемого элемента исправила это для меня. Если вы хотите использовать прописку, вы также можете установить размер окна в рамку.

Относительное позиционирование не требуется, но вы можете использовать переполнение: скрытый, чтобы очистить плавающие элементы.

Ответ 18

Добавление свойств перехода/преобразования 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;