Я попытался вставить и отключить DIV с помощью функции переключения jQuery, но результат всегда неустойчив в начале и/или конце анимации. Вот код js, который я использую:
$(document).ready(function(){
$('#link1').click(
function() {
$('#note_1').parent().slideToggle(5000);
}
);
И HTML:
<div class="notice">
<p>Here some text. And more text. <span id="link1">Test1</span></p>
<div class="wrapper">
<div id="note_1">
<p>Some content</p>
<p>More blalba</p>
</div>
</div>
</div>
Здесь вы также можете увидеть полный пример: jQuery Slide test
Я обычно использую Mootools, и я могу сделать этот слайд без каких-либо проблем с ним. Но я начинаю новый проект в Django, и большинство приложений в Django используют jQuery. Поэтому для этого и после прочтения этого jQuery vs Mootools я решил, что это будет хороший повод начать использовать jQuery. Поэтому моя первая необходимость заключалась в том, чтобы спустить этот DIV. И это не сработало.
Я сделал больше поиска, и я обнаружил, что старая ошибка в jQuery с запасом и отступом применяется к DIV. Решение состоит в том, чтобы обернуть DIV в другой DIV. В моем случае это не помогло.
В дальнейшем я нашел этот пост Ожидаемая анимация Slidedown. Он фиксирует прыжок с одного конца, но не на другом (Test2 in jQuery Slide test).
В переполнении стека я нашел эту jQuery IE jerky слайд-анимацию. В комментариях я увидел, что проблема связана с тегом P внутри DIV. Если я заменяю теги P тегами DIV, которые исправляют проблему, но это не правильное решение.
Наконец, я нашел этот слайд слайда jQuery. Читая это, я понял, что проблема, разрешенная путем переключения с P-тега на DIV, была с полями P (не присутствующими в DIV) и сбрасыванием полей между элементами. Поэтому, если я переключу поля на paddings, это устранит проблему. Но я теряю рушится поведение полей, рушится, что я хочу.
Честно говоря, я могу сказать, что мой первый опыт работы с jQuery не очень хорош. Если я хочу использовать один из простейших эффектов в jQuery, я должен не использовать правильную функцию (slideToggle), а вместо этого использовать какой-то ручной код И обернуть DIV в другой DIV и переключить поля в paddings, испортить мой макет.
Я пропустил более простое решение?
Как подсказывает krdluzni, я попытался написать как пользовательский script с помощью метода animate. Здесь мой код:
var $div = $('#note_2').parent();
var height = $div.height();
$('#link2').click(
function () {
if ( $div.height() > 0 ) {
$div.animate({ height: 0 }, { duration: 5000 }).css('overflow', 'hidden');
} else {
$div.animate({ height : height }, { duration: 5000 });
}
return false;
});
Но это не работает либо потому, что jQuery всегда устанавливает переполнение видимым в конце анимации. Таким образом, DIV перезаписывается в конце анимации, но накладывается на остальную часть содержимого.
Я также попытался использовать UI.Slide(и масштаб и размер). Он работает, но контент ниже DIV не перемещается с анимацией. Он только прыгает в конце/начале анимации, чтобы заполнить пробел. Я не хочу этого.
UPDATE:
Одна часть решения заключается в том, чтобы динамически устанавливать высоту контейнера DIV перед чем-либо. Это решает один прыжок. Но не одна причина, сворачивая маржу. Здесь код:
var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height()+"px");
parent_div.hide();
ВТОРОЕ ОБНОВЛЕНИЕ:
Вы можете увидеть ошибку на собственном сайте jQuery на этой странице (пример B):
Учебники: Live Примеры jQuery
ТРЕТЬЕ ОБНОВЛЕНИЕ:
Пробовал с jQuery 1.4, больше шансов: - (
Ответ 1
Я нашел, что последовательно работает установка невидимой границы 1px:
border: 1px solid transparent;
Не нужно фиксировать ширину или высоту или что-то еще, и анимация не прыгает. Ура!
Ответ 2
Решение состоит в том, что скользящий div должен иметь ширину, заданную в пикселях. Не используйте "auto" и "%". И у вас будет отличный результат! Проблема заключается в встроенных элементах, которые находятся в скользящем div.
но если они имеют ширину в px, высота будет одинаковой. Попробуй.
Ответ 3
Сегодня я столкнулся с этой проблемой. Однако я заметил, что отключение всех CSS исправило проблему. Кроме того, я знал, что это сработало хорошо, поэтому, должно быть, это были недавние изменения, вызвавшие эту проблему.
Оказалось, что я использовал переходы в CSS для облегчения вхождения и выпадения.
Как только эти переходы были удалены из элементов, которые я добавлял, все было в порядке.
Итак, если у вас такая же проблема, просто добавьте эти строки к добавляемым элементам:
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
(Возможно, я немного злоупотреблял переходами, просто не добавляя их к элементам, для которых я хочу переходы, но использую их для всего веб-сайта.)
Ответ 4
Попробуйте удалить все поля CSS из всех элементов. Обычно резкая анимация возникает из-за того, что поля не учитываются рамкой анимации.
Ответ 5
Я считаю, что animate() является самым надежным способом анимации чего-либо в jQuery (по крайней мере, кросс-браузер).
Это динамически обертывает содержимое в div, а затем анимирует высоту этой обертки div, используя высоту ее внутреннего содержимого.
http://jsfiddle.net/BmWjy/13/
$('a').click(function(event) {
event.preventDefault();
xToggleHeight($(this).next());
});
//For each collapsible element.
$('.collapsible').each(function() {
//Wrap a div around and set to hidden.
$(this).wrap('<div style="height:0;overflow:hidden;visibility:hidden;"/>');
});
function xToggleHeight(el){
//Get the height of the content including any margins.
var contentHeight = el.children('.collapsible').outerHeight(true);
//If the element is currently expanded.
if(el.hasClass("expanded")){
//Collapse
el.removeClass("expanded")
.stop().animate({height:0},5000,
function(){
//on collapse complete
//Set to hidden so content is invisible.
$(this).css({'overflow':'hidden', 'visibility':'hidden'});
}
);
}else{
//Expand
el.addClass("expanded").css({'overflow':'', 'visibility':'visible'})
.stop().animate({height: contentHeight},5000,
function(){
//on expanded complete
//Set height to auto incase browser/content is resized afterwards.
$(this).css('height','');
}
);
}
}
Ответ 6
Отслеживание происходит, когда родительский div.wrapper в вашем случае имеет дополнение.
Наложение продолжается на дочерний div, а не на родителя. jQuery - это анимация высоты, а не отступы.
Пример:
<div class="notice">
<p>Here some text. And more text. <span id="link1">Test1</span></p>
<div class="wrapper" style="padding: 0">
<div id="note_1" style="padding: 20px">
<p>Some content</p>
<p>More blalba</p>
</div>
</div>
</div>
Надеюсь, что это поможет.
Ответ 7
Вы можете написать пользовательскую анимацию, используя метод animate. Это даст вам полный контроль над всеми деталями.
Ответ 8
Я заметил, что после вашего контейнера <div> у вас есть <br />, анимация также будет неустойчивой. Устранение этой проблемы устранило мою проблему.
Ответ 9
Здесь много предложений и много назад и вперед относительно того, что работает. Для меня проблема с поведением заключалась в том, что анимация расширения контейнера будет расширяться, а затем возвращаться к правильной высоте расширения (все это делается как часть одной анимации). В качестве примера анимация будет сначала расширяться до высоты 500 пикселей, а затем втягиваться в 450 пикселей. Не было проблем с коллапсом.
Решение, которое работало, состояло в том, чтобы добавить к расширяющемуся/сворачивающемуся div, CSS: white-space: nowrap;
Это сработало отлично - плавное расширение до правильной высоты.
Ответ 10
css padding и jquery slideToggle не работают хорошо. Попытайтесь заполнить пробел.
Ответ 11
Очевидно, что существует много разных решений этой проблемы - и в зависимости от вашего макета разные решения имеют разные результаты.
Вот что я (разделил)
<div>
<p>Text</p>
</div>
<div class="hidden">
<p></p>
</div>
Когда я буду использовать jQuery для отображения <div class="hidden">, поле в элементе <p> скроется с краем элемента <p> над ним.
Я думал, что это странно, поскольку они были в разных <divs>.
Мое решение состояло в том, чтобы устранить границу в нижней части <p>. Наличие края с одной стороны предотвращает сбрасывание края с нижней части первого <p> с вершины второго <p>.
Это обходное решение решило мою проблему, возможно, применимо к другим, но может не работать для всех.
Ответ 12
Вам просто нужно изменить эффекты "вверх", "вниз" в эффектах. js, чтобы они учитывали поля или прокладки, которые могут существовать, а затем корректировать то, что они воспринимают как общий размер элемента для размещения этих значений... что-то в этом роде....
Effect.BlindDown = function(element) {
element = $(element);
var elementDimensions = element.getDimensions();
//below*
var paddingtop = parseInt(element.getStyle('padding-top'));
var paddingbottom = parseInt(element.getStyle('padding-bottom'));
var totalPadding = paddingtop + paddingbottom;
if(totalPadding > 0)
{
elementDimensions.height = (elementDimensions.height - totalPadding);
}
//above*
return new Effect.Scale(element, 100, Object.extend({
scaleContent: false,
scaleX: false,
scaleFrom: 0,
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
restoreAfterFinish: true,
afterSetup: function(effect) {
effect.element.makeClipping().setStyle({height: '0px'}).show();
},
afterFinishInternal: function(effect) {
effect.element.undoClipping();
}
}, arguments[1] || { }));
};
Ответ 13
Попробуйте установить свойство "position" контейнера (в этом случае .notice div) на "relative".
Работал для меня.
Источник: heightToggle height is "jump"
Ответ 14
Проблема в том, что вы выполняете действие над родительским, делая это удаляет CSS, связанный с этим элементом.
Вам нужно запустить слайд на заметке 1, а не в качестве родителя примечания 1.
У меня была такая же проблема, и я исправил ее, понизив уровень.
Ответ 15
Вы можете попробовать добавить doctype, если у вас его нет, он работал у меня в IE8 после того, как я нашел предложение здесь на SO: jQuery slideToggle подскакивает, Он предлагает строгий DTD, но я просто использовал doctype, который использует google.com: <!doctype html>, и он исправил мою проблему.
Ответ 16
Я наткнулся на ту же ошибку, что и в течение нескольких дней, чтобы найти решение. проблема в том, когда элемент скрыт. jquery получает неправильную высоту. верхнее исправление, вы должны получить высоту перед тем, как скрыться, и использовать пользовательскую анимацию на этой высоте. его сложный путь здесь для лучшего объяснения
Ответ 17
У меня была такая же проблема с "jerkyness" с divs внутри моего тега nav - моя цель - показать неупорядоченный список при наведении div (если он существует). Мои списки динамически создаются, поэтому они не имеют фиксированного значения.
Вот оно:
$("nav div").hover(
function() { // i.e. onmouseover function
/****simple lines to fix a % based height to a px based height****/
var h = jQuery(this).find("ul").height(); //find the height
jQuery(this).find("ul").css("height", h);
//set the css height value to this fixed value
/*****************************************************************/
jQuery(this).find("ul").slideDown("500");
},
function(){ // i.e. onmouseout function
jQuery(this).find("ul").slideUp("500");
});
});
Ответ 18
В моем случае я решил добавить элемент style="white-space:nowrap;" в элемент, чтобы предотвратить просчеты функции jQuery; нет необходимости устанавливать фиксированную ширину, если вам не требуется обернуть.
Ответ 19
Удостоверьтесь, что у вас нет правил перехода CSS, установленных глобально или в вашем контейнере или в любых входящих элементах. Это также вызовет дерзость.
Ответ 20
В этот вопрос встал сегодня, увидел этот вопрос и начал возиться с тем, что я увидел здесь. Я решил нашу нерешительную проблему, удалив позицию: относительно CSS содержащего div. После этого больше нет странности. Мои 2 цента.
Ответ 21
Я использовал slideDown() как этот
$('#content').hide().delay(500).slideDown(500);
Для меня это был основной контейнер #content. Я скрывал его, а затем вызывал slideDown(). Я удалил свойство padding в CSS, и после этого все сработало. Обычно это margin, padding или% width, поэтому самый простой метод - это комментирование каждого свойства и тестирование их 1 на 1 для получения ваших результатов.
Ответ 22
У меня была одна и та же проблема, но ни один из предлагаемых решений не работал у меня, поэтому я предлагаю решение, которое полностью исключает slideToggle().
Исправленные заметки. Загрузите страницу как обычно, соберите высоту каждого элемента, который хотите переключить, сохраните эту высоту в специальном атрибуте данных и затем скомпрометируйте каждый элемент. Тогда это так же просто, как изменить max-height между значением в элементе data-height атрибутом (расширенным) и нулевым (свернутым). Если вы хотите добавить дополнительные элементы и поля и т.д. К элементам, я рекомендую хранить их в отдельном классе CSS для добавления и удаления с помощью свойства max-height.
Поместите jQuery сразу после элементов, которые вы хотите переключить, и разрешите им выполнять во время загрузки страницы (так что вам не нужно следить за их загрузкой и затем сбрасывать).
HTML
<ul id="foo">
<li>
<h2>Click Me 1</h2>
<div class="bar">Content To Toggle Here 1</div>
</li>
<li>
<h2>Click Me 2</h2>
<div class="bar">Content To Toggle Here 2</div>
</li>
</ul>
CSS
#foo>li>div.bar {transition: all 0.5s;
overflow: hidden;}
JQuery
$('#foo h2').each(function(){
var bar = $(this).siblings('.bar');
bar.attr('data-height', bar.height()); //figure out the height first
bar.css('max-height', '0px'); //then close vertically
});
$('#foo h2').click(function(){
var bar = $(this).siblings('.bar');
if ( bar .css('max-height') == '0px' ){ //if closed (then open)
bar.css('max-height', bar.data('height') + 'px');
} else { //must be open (so close)
bar.css('max-height', '0px');
}
});
Вот рабочий JSFiddle: http://jsfiddle.net/baacke/9WtvU/
Ответ 23
У меня была такая же проблема. Я исправил это, добавив следующее:
.delay(100)
Угадайте, что больше времени на размышления помогает?
Ответ 24
Я только что узнал, что эта проблема также может возникнуть, если в расширяющемся/свертывающемся элементе есть плавающие элементы. В этом случае clearfix (clear: both;) в конце (все еще внутри) анимированный элемент может избавиться от него.
Ответ 25
Добавление моего решения: оказалось, что моя проблема была flexbox (только в хром). Я установил align-items: baseline; в родительский элемент. Установите align-self: center; в мой дочерний элемент slideToggling full-width, и он очистит его. Большое использование двух часов.
Ответ 26
Я решил это, установив:
box-sizing: content-box;
Ответ 27
Для меня устранена минимальная высота из моего контейнера.
Ответ 28
Для меня решение состояло в том, что у меня было определение стиля CSS, например:
* {
transition: all .3s;
}
Удаление этого было решением!
