Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2018, 07:20
Новичок на форуме
Отправить личное сообщение для METALIX Посмотреть профиль Найти все сообщения от METALIX
 
Регистрация: 25.02.2018
Сообщений: 2

Неправильно работает скорость в функции animate
Здравствуйте. Возникла такая проблема. Есть блок .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

Аналогично сделана функция сворачивания. Проблема с ней та же. У кого-нибудь есть мысли, как это можно пофиксить?
Ответить с цитированием
  #2 (permalink)  
Старый 25.02.2018, 08:09
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 498

http://szmp-metall.ru/css/main.css:512

.work-container {
transition-duration: 5s;
}
Ответить с цитированием
  #3 (permalink)  
Старый 25.02.2018, 08:33
Новичок на форуме
Отправить личное сообщение для METALIX Посмотреть профиль Найти все сообщения от METALIX
 
Регистрация: 25.02.2018
Сообщений: 2

Да, спасибо. Помогло) На css как-то вообще не подумал
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибка в коде Js, Неправильно работает скрипт. Julia Panatova Общие вопросы Javascript 1 19.01.2011 14:12
Ошибка в коде Js, Неправильно работает скрипт. Julia Panatova Общие вопросы Javascript 7 07.01.2011 13:41
Скрипт неправильно работает в FF InviS Общие вопросы Javascript 6 11.04.2010 16:56
AJAX - заполнение select - неправильно работает в Mozilla 5.0 С.Тарасов AJAX и COMET 0 17.06.2009 00:58
java-script фотогалерея, неправильно работает в ИЕ6 Scroll Internet Explorer 1 03.12.2008 14:16