IIIu6ko
@IIIu6ko

Плавное сворачивание и разворачивание текста?

https://jsfiddle.net/LL54vf73/2/

$(document).ready(function() {

  $('.reviews__text').each(function() {
    if ($(this).text().length > 391) {
      $(this).data('full', $(this).text());
      $(this).text($(this).text().slice(0, 391) + '...');
      $(this).after("<span class='reviews__more'>Развернуть</span>");
    }
  });

  $('.reviews__more').click(function() {
    if ($(this).text() == 'Развернуть') {
      $(this).siblings('.reviews__text').text($(this).siblings('.reviews__text').data('full'));
      $(this).text('Свернуть');
    } else {
      $(this).siblings('.reviews__text').text($(this).siblings('.reviews__text').text().slice(0, 391) + '...');
      $(this).text('Развернуть');
    }
  });

});


Подскажите как можно анимировать подобную конструкцию? Или как и что нужно переписать, чтобы можно было анимировать.

Нужно чтобы плавно разворачивалось и сворачивалось. Высота абзаца .reviews__text изменяется за счёт смены длинны текста, но я не знаю как туда подлезть и анимировать эту высоту. Transition стоит, но эффекта ноль, видимо какие-то нюансы.

мб записывать высоту элемента в data() вместе с текстом и как-то потом её манипулировать или вообще переписать скрипт.
  • Вопрос задан
  • 957 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
18 июн. 2024, в 18:49
1000 руб./в час
18 июн. 2024, в 18:04
10000 руб./за проект