Возникла такая проблема. Есть блок .work-container
с некоторым количеством блоков .work
внутри.
//И jquery функция, которая обеспечивает это разворачивание.
$('.show-more').click(function() {
var hei = ($('.work-container')[0].scrollHeight);
//alert(hei);
$('.work-container').animate({
height: hei
}, 200, "linear");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-container">
<div class="work">
<div class="img">
<img src="img/shlif.png" alt="Шлифовальные работы">
</div>
<p>Шлифовальные работы</p>
</div>
<div class="work">
<div class="img">
<img src="img/sverl.png" alt="Сверловка">
</div>
<p>Сверловка</p>
</div>
<div class="work">
<div class="img">
<img src="img/term.png" alt="Термообработка">
</div>
<p>Термообработка</p>
</div>
<div class="work">
<div class="img">
<img src="img/tokar.png" alt="Токарные работы">
</div>
<p>Токарные работы</p>
</div>
<div class="work">
<div class="img">
<img src="img/koord.png" alt="Координатно-расточные работы">
</div>
<p>Координатно-расточные работы</p>
</div>
<div class="work">
<div class="img">
<img src="img/el.png" alt="Электроэрозийная обработка">
</div>
<p>Электроэрозийная обработка</p>
</div>
<div class="work">
<div class="img">
<img src="img/frez.png" alt="Фрезерные работы">
</div>
<p>Фрезерные работы</p>
</div>
<div class="work">
<div class="img">
<img src="img/zub.png" alt="Зубонарезные работы">
</div>
<p>Зубонарезные работы</p>
</div>
<div class="work">
<div class="img">
<img src="img/gibka.png" alt="Гибка металла">
</div>
<p>Гибка металла</p>
</div>
<div class="work">
<div class="img">
<img src="img/constr.png" alt="Изготовление металлоконструкций">
</div>
<p>Изготовление металлоконструкций</p>
</div>
<div class="work">
<div class="img">
<img src="img/instr.png" alt="Производство металлорежущего инструмента">
</div>
<p>Производство металлорежущего инструмента</p>
</div>
<div class="work">
<div class="img">
<img src="img/pruj.png" alt="Изготовление пружин">
</div>
<p>Изготовление пружин</p>
</div>
<div class="work">
<div class="img">
<img src="img/rez.png" alt="Резка металла">
</div>
<p>Резка металла</p>
</div>
<div class="work">
<div class="img">
<img src="img/pokr.png" alt="Нанесение покрытий">
</div>
<p>Нанесение покрытий</p>
</div>
</div>
<!--Есть кнопка .show-more, которая по клику разворачивает его полностью.-->
<button class="show-more" id="show">Показать еще</button>
Переменная hei
получает значение нужной для разворачивания блока высоты, ну и потом height
анимируется.
Проблема в том, что скорость анимации как будто игнорируется. Не получается развернуть блок достаточно быстро, несмотря на выставленные 200ms
в параметре скорости. Раскрытие блока происходит +- секунд за 5. Больше поставить можно. Если поставить 20 000
, то он раскроется за 20 секунд
, как и положено.
При этом, эта функция нормально работает на любых параметрах скорости, если вместо реального контента в .work-container
просто поставить lorem1000
или что-то подобное.
Аналогично сделана функция сворачивания. Проблема с ней та же. У кого-нибудь есть мысли, как это можно пофиксить?