Я хочу , чтобы анимировать <div>
от 200px
до auto
высоты. Я не могу заставить его работать, хотя. Кто-нибудь знает как?
Вот код:
$("div:first").click(function(){
$("#first").animate({
height: "auto"
}, 1000 );
});
javascript
jquery
html
css
jquery-animate
Даниил
источник
источник
Ответы:
Сохранить текущую высоту:
Временно переключите высоту на авто:
Получить авто высоту:
Вернитесь к
curHeight
и анимируйте кautoHeight
:И вместе:
источник
.animated({height: autoHeight}, 1000, function(){ el.height('auto'); });
opacity: 0; position: absolute;
при его измерении и удалив его, как только вы закончите.ИМО это самое чистое и простое решение:
Объяснение: DOM уже знает из своего начального рендеринга, какой размер будет иметь расширенный div, если он установлен на автоматическую высоту. Это свойство хранится в узле DOM как
scrollHeight
. Нам просто нужно извлечь элемент DOM из элемента jQuery, вызвав его,get(0)
и тогда мы сможем получить доступ к свойству.Добавление функции обратного вызова для установки высоты в автоматический режим позволяет повысить скорость отклика после завершения анимации (кредит chris-williams ):
источник
clientHeight
, который, кажется, не поддерживается: developer.mozilla.org/en-US/docs/Web/ API / Element.clientHeight$('#first').animate({ height: $('#first').get(0).scrollHeight }, 1000, function() { $(this).height('auto'); });
scrollWidth
для анимации ширины.По сути, это тот же подход, что и в ответе Box9, но я обернул его в хороший плагин jquery, который принимает те же аргументы, что и обычная анимация , когда вам нужно иметь больше анимированных параметров и уставать повторять один и тот же код снова и снова. :
редактировать: цепной и чище сейчас
источник
Лучшее решение не будет полагаться на JS, чтобы установить высоту вашего элемента. Ниже приведено решение, которое анимирует элемент с фиксированной высотой на полную («авто») высоту:
https://gist.github.com/2023150
источник
height
фиксированное значение (например, 122px). Мой элемент через некоторое время изменил высоту, поэтому мне пришлось заменить аргумент продолжительности (400) на опции{duration: 400, complete: function() {$selector.css('height', 'auto');}}
это работает, и это проще, чем решения раньше:
CSS:
JS:
Примечание. Для этого решения требуется пользовательский интерфейс jQuery.
источник
.addClass
и.removeClass
?источник
Вы всегда можете обернуть дочерние элементы #first и сохранить высоту высоты оболочки как переменную. Это может быть не самый красивый и эффективный ответ, но он делает свое дело.
Вот скрипка, где я включил сброс.
но для ваших целей вот мясо и картофель:
источник
Используйте slideDown и slideUp
источник
Мне удалось это исправить: D вот код.
источник
Вы можете сделать ответ Liquinaut реагирующим на изменения размера окна, добавив обратный вызов, который возвращает высоту автоматически.
источник
По сути, высота auto доступна только после визуализации элемента. Если вы установили фиксированную высоту или если ваш элемент не отображается, вы не сможете получить к нему доступ без каких-либо хитростей.
К счастью, есть некоторые приемы, которые вы можете использовать.
Клонируйте элемент, отобразите его за пределами представления и задайте ему высоту автоматически, и вы можете взять его из клона и использовать его позже для основного элемента. Я использую эту функцию и, кажется, работает хорошо.
ИСПОЛЬЗОВАНИЕ:
источник
Вы всегда можете сделать это:
вот скрипка: http://jsfiddle.net/Zuriel/faE9w/2/
источник
.appendTo("body")
на.appendTo(el.parent())
Ваши селекторы не совпадают. У вашего элемента есть идентификатор 'first', или это первый элемент в каждом div?
Более безопасным решением было бы использовать «это»:
источник
$(this)
внутри вашего обработчика кликов.animate({height: 'auto'})
не имеет никакого эффекта. По крайней мере, не с JQuery 1.6.4.Попробуй это ,
источник
Вот тот, который работает с BORDER-BOX ...
Привет, ребята. Вот плагин jQuery, который я написал, чтобы сделать то же самое, но также учесть различия в высоте, которые возникнут, когда вы
box-sizing
установилиborder-box
.Я также включил плагин "yShrinkOut", который скрывает элемент, сжимая его вдоль оси Y.
Любой из параметров, которые я использовал, может быть опущен или установлен в нуль для принятия значений по умолчанию. Параметры, которые я использовал:
источник
Переключить слайд ( ответ Box9 расширен)
источник
Я публикую этот ответ, хотя эта ветка старая. Я не мог получить принятый ответ, чтобы работать на меня. Этот работает хорошо и довольно просто.
Я загружаю высоту каждого деления в данные
Тогда я просто использую это при анимации по клику.
Я использую переход CSS, поэтому я не использую анимацию jQuery, но вы можете сделать анимацию точно так же.
источник
Вы можете сохранить его в атрибуте данных.
источник
Мне нужна была эта функциональность для нескольких областей read more на одной странице, которые реализовали это в шорткоде Wordpress. Я столкнулся с той же проблемой.
Технически, все разделы read more на странице имеют фиксированную высоту. И я хотел иметь возможность расширить их по отдельности до автоматической высоты с помощью переключателя. Первый щелчок: «развернуть до полной высоты текстового промежутка», второй щелчок: «свернуть до высоты по умолчанию 70 пикселей»
Html
CSS
Так что выше это выглядит очень просто,
data-base
атрибут, который мне нужен, чтобы установить необходимую фиксированную высоту.data-height
Атрибут я использовал для хранения фактической (динамическая) высоты элемента.JQuery часть
Сначала я использовал функцию clickToggle для первого и второго клика. Вторая функция более важна: фактическая высота
setAttr_height()
всех.read-more
элементов устанавливается при загрузке страницы вbase-height
атрибуте. После этого базовая высота устанавливается с помощью функции jquery css.Теперь, когда оба наших атрибута установлены, мы можем плавно переключаться между ними. Измените только
data-base
желаемую (фиксированную) высоту и переключите класс .read-more для своего собственного идентификатора.Вы все можете увидеть это работает на скрипке FIDDLE
источник
Если все, что вам нужно, это показать и скрыть, скажем, div, то этот код позволит вам использовать jQuery animate. Вы можете сделать так, чтобы jQuery анимировал большую часть желаемой высоты, или вы можете обмануть, оживив до 0px. jQuery просто нужна высота, установленная jQuery, чтобы преобразовать ее в авто. Таким образом .animate добавляет style = "" к элементу, который преобразует .css (height: auto).
Самый чистый способ, которым я видел эту работу, состоит в том, чтобы анимировать примерно на ожидаемую высоту, а затем позволить ей установить автоматический режим, и при правильной работе он может выглядеть очень плавно. Вы даже можете оживить прошлое, что вы ожидаете, и оно вернется назад. Анимация до 0px при длительности 0 просто снижает высоту элемента до его автоматической высоты. Человеческому глазу все равно это выглядит оживленно. Наслаждаться..
Извините, я знаю, что это старый пост, но я чувствовал, что он будет уместен для пользователей, которые ищут эту функциональность еще с jQuery, которые сталкиваются с этим постом.
источник
Я собрал что-то, что делает именно то, что я искал и выглядит великолепно. Использование scrollHeight элемента дает вам высоту, когда он был загружен в DOM.
источник