Как анимировать родительский контейнер, скрыв одного ребенка и показав другому?

Question

Я пытаюсь анимировать родительский контейнер (который по сути является просто границей) после скрытия дочернего поля ввода и одновременного отображения другой дочерней текстовой области, и наоборот. JQuery UI - это то, что я использую.

Оба дочерних элемента имеют одинаковую ширину, только разную высоту. Высота текстовой области определяется атрибутом 'columns'.

Вместо поведения по умолчанию изменения размера родительского контейнера, я пытаюсь заставить его анимировать переход по высоте.

Довольно уверен, что это не повторяющийся вопрос.

<!-- Blue-bordered container -->
<div class="input-group text-info">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-mobile-alt fa-lg text-info"></i>
        </span>
    </div>
    <!-- Either an 'input' is displayed... -->
    <input type="text">
    <!-- ...or a 'textarea'  -->
    <textarea rows="5" style="display:none"></textarea>
</div>

Answer 1

Не ясно, чего вы пытаетесь достичь.Вот пример использования параметров .fadeOut() и .fadeIn().

$(function() {
  $(".input-group-text").click(function() {
    var p = $(this).parent().parent();
    var hidden = $(":hidden", p);
    if (hidden.is("input")) {
      console.log("Hide TextArea");
      $("textarea", p).fadeOut(100, function() {
        p.animate({
          height: "2.5em"
        }, 600);
        $("input", p).fadeIn(100);
      });
    } else {
      console.log("Hide Input");
      $("input", p).fadeOut(100, function() {
        p.animate({
          height: "7.5em"
        }, 600);
        $("textarea", p).fadeIn(100);
      });
    }
  });
});

div.text-info {
  border: 2px solid blue;
  border-radius: 3px;
  padding: .4em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="input-group text-info" style="height: 2.5em;">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fas fa-mobile-alt fa-lg text-info"></i></span>
  </div>
  <input type="text">
  <textarea rows="5" style="display:none"></textarea>
</div>

Обновление

Вы можете использовать .animate() для настройки определенных стилей.Таким образом, чтобы обновить окно, примените к нему значение height, а затем используйте Animate, чтобы изменить его на определенной скорости.

Пример

$(".text-info").animate({
  height: "7.5em"
}, 600);

.animate (properties [, duration] [, easing] [, complete])

• properties - объект свойств и значений CSS, к которому будет перемещаться анимация.

• duration (по умолчанию: 400) - Строка или число, определяющее, как долго будет выполняться анимация.

См. Подробнее: http://api.jquery.com/animate/

Надеюсь, это поможет.