2

Возникла такая проблема. Есть блок .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 или что-то подобное.

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

2 ответа 2

3

$('.show-more').click(function() {
  var hei = ($('.work-container')[0].scrollHeight);
  $('.work-container').animate({
    height: hei
  }, 2000, 'linear'); // была выставлена большая скорость данные цифры это миллисекунды
});
.work-container {
  overflow: hidden;
  background: orange;
  height: 100px;
}
<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="https://is4-ssl.mzstatic.com/image/thumb/Purple71/v4/07/cb/fc/07cbfcc0-ac70-8fb3-0ae8-6ba4648d58f2/pr_source.png/100x100bb-85.jpg" alt="Шлифовальные работы">
    </div>
    <p>Шлифованные работы</p>
  </div>

  <div class="work">
    <div class="img">
      <img src="https://realnyeludi.ru/img/y0qwk4qup/1nn1k5vfl.jpg" alt="Сверловка">
    </div>
    <p>Сверловка</p>
  </div>

</div>

<button class="show-more" id="show">Показать еще</button>

0

Проблема оказалась не в jquery, а в css.

.work-container {transition: 5s};

Мораль сей басни такова. Всегда удаляйте всё то, что понаписали, пытаясь решить проблему одним способом, прежде чем приступить к другому))

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.