[METALIX]

Здравствуйте. Возникла такая проблема. Есть блок .work-container с некоторым количеством блоков .work в нем.

<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>

И jquery функция, которая обеспечивает это разворачивание.

$('.show-more').click(function () {
var hei = ($('.work-container')[0].scrollHeight);
//alert(hei);

$('.work-container').animate({height: hei}, 200, "linear");
});

Переменная hei получает значение нужной для разворачивания блока высоты, ну и потом height анимируется.

Проблема в том, что скорость анимации как будто игнорируется. Не получается развернуть блок достаточно быстро, несмотря на выставленные 200ms в параметре скорости. Раскрытие блока происходит +- секунд за 5. Больше поставить можно. Если поставить 20 000, то он раскроется за 20 секунд, как и положено. При этом, эта функция нормально работает на любых параметрах скорости, если вместо реального контента в .work-container просто поставить lorem1000 или что-то подобное.

Пронаблюдать этот эффект можно здесь: http://szmp-metall.ru/#services

Аналогично сделана функция сворачивания. Проблема с ней та же. У кого-нибудь есть мысли, как это можно пофиксить?